Tables can be used to lay out information in a clear and easily understandable format, displayed on rows and columns.

The <style> tag from the examples presented in this tutorial must be added in the <head> are of the webpage.


Creating Tables

Tables are created with the <table> ... </table> tag. A table contains rows and columns.
- The rows are created with the <tr> tag.
- Table cells (that form the columns) are defined with the <td> tag, within the <tr> element.

- In HTML5 the style, alignamennt and tables design is made with CSS; see the tutorial: Styling HTML table with CSS.


Example, a table defined with the minimum elements (having two rows and two columns):
<style>
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Example HTML table</h4>

<table>
 <tr>
 <td>Row 1 - Column 1</td>
 <td>Row 1 - Column 2</td>
 </tr>
 <tr>
 <td>Row 2 - Column 1</td>
 <td>Row 2 - Column 2</td>
 </tr>
</table>

Aligning HTML table

To align a table in webpage use CSS style.


- A table cell (<td>) may contain any content: images (<img>) paragraph (<p>), lists (<ul>, <li>), DIVs (<div>), including another table.
Example:
<style>
table {
 border: 1px solid #000;
 margin:5px auto;
 text-align:center;
}
</style>

<h4>Centered table with HTML elements in TD</h4>

<table>
 <tr><td>
 <p>This is a paragraph,<br>
 next, an image.</p>
 <img src='../imgs/smile_gift.png' alt='Smile' width='150' height='132' />
 </td></tr>
</table>

HTML table structure

The table element contains also other tags to form the table structure, used to group the rows and the columns.

Table elements


Example with <th>, rowspan, and colspan

<style>
table {
 border-collapse: collapse;
 margin:5px auto;
 text-align:center;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Centered table, with th, rowspan, and colspan</h4>

<table>
<tr>
 <th>Title 1</th>
 <th>Title 2</th>
</tr>
<tr>
 <td>Row 2 - Cell 1</td>
 <td>Row 2 - Cell 2</td>
</tr>
<tr>
 <td colspan='2'>Row 3 - Cells 1 and 2</td>
</tr>
<tr>
 <td rowspan='2'>Rows 4 and 5 - Cell 1</td>
 <td>Row 4 - Cell 2</td>
</tr>
<tr>
 <td>Row 5 - Cell 2</td>
</tr>
</table>

Example with thead, tfoot, tbody

<style>
table {
 border-collapse: collapse;
 margin:5px auto;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Table with thead, tfoot, tbody </h4>
<p>Here, the thead, tbody and tfoot sections are defined with different background colors.</p>

<table>
<thead style='background:#b8b8f8;'>
 <tr>
 <th>Web site</th>
 <th>Description</th>
 </tr>
</thead>
<tfoot style='background:#b0d8b0; text-align:center;'>
 <tr>
 <td colspan='2'>Web sites with free resources.</td>
 </tr>
</tfoot>
<tbody style='background:#ff0;'>
 <tr>
 <td>marplo.net</td>
 <td>Web development, foreign languages, forum.</td>
 </tr>
 <tr>
 <td>coursesweb.net</td>
 <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript.</td>
 </tr>
</tbody>
</table>

Example with colgroup

- Notice that the second colgroup element spans two columns.
<style>
table {
 border-collapse: collapse;
 margin:5px auto;
}
table, th, td {
 border: 1px solid #000;
}
</style>

<h4>Example colgroup</h4>
<p>Table with two colgroup. The first 'colgroup' sets the style of the first column (the ID).</p>

<table>
<colgroup style='background:#b9d9b9; width:50px;'></colgroup>
<colgroup span='2' style='background-color:#d8d8fb;'>
</colgroup>
<tr style='background:#e0e0e0;'>
 <th>ID</th>
 <th>Web site</th>
 <th>Description</th>
</tr>
<tr>
 <td>01</td>
 <td>marplo.net</td>
 <td>Web development, foreign languages, anime and games</td>
</tr>
<tr>
 <td>02</td>
 <td>coursesweb.net</td>
 <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
</tr>
</table>

Example with caption

The position where the caption is displayed (top /bottom) is defined with the CSS caption-side property, applyed to the table element. Default is 'top'.
- Notice that inside caption element is added a <strong> element, this means that you can add formatting tags inside <caption>.
<style>
table {
 border-collapse: collapse;
 caption-side:bottom;
}
table, th, td {
 border: 1px solid #000;
}
 margin:5px auto;
</style>

<h4>Table caption</h4>

<table>
<caption>Caption - <strong>Free Web Development resources</strong></caption>
<tr style='background-color:#deedfe;'>
 <th>Web site</th>
 <th>Description</th>
</tr>
<tr>
 <td>marplo.net</td>
 <td>Web development, foreign languages, anime and games</td>
</tr>
<tr>
 <td>coursesweb.net</td>
 <td>Lessons and tutorials: HTML, CSS, PHP-MySQL, JavaScript</td>
</tr>
</table>

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which HTML5 tag can be used to embed an external application (SWF, PDF) in web page?
<mark> <embed> <canvas>
<embed src="flash_game.swf" width="450" height="350" />
Which CSS pseudo-element adds a special style to the first line of a text?
:first-letter :before :first-line
#id:first-line {
  font-weight: bold;
  color: blue;
}
Click on the window object property which gets or sets the URL of current page.
window.location window.self window.status
var url = window.location;
alert(url);
Indicate the PHP function used to get the contents of a file or page and store it into a string.
fopen() file_put_contents() file_get_contents()
$homepage = file_get_contents("http://coursesweb.net/");
echo $homepage;
Creating HTML Tables

Last accessed pages

  1. Node.js Move and Copy file (13032)
  2. Insert, Select and Update NULL value in MySQL (45558)
  3. innerHTML and outerHTML to Get and Replace HTML content (22627)
  4. Contact page - CoursesWeb (24284)
  5. Tabs effect with CSS (24968)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1349)
  2. Tabs effect with CSS (1316)
  3. Contact page - CoursesWeb (1315)
  4. Courses Web: PHP-MySQL JavaScript Node.js Ajax HTML CSS (890)
  5. Insert, Select and Update NULL value in MySQL (553)