HTML Table Examples with thead, tbody, tfoot

Xah Lee, 2011-07-07

This page shows examples HTML table with {caption, thead, tbody, tfoot} tags.

Table with Caption

Here's the source code:

<table border="1">
<caption>My Big Math Array Table</caption>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>

<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
</table>

Table with {thead, tbody, tfoot, th} Tags

The “thead” is used to enclose a group of rows in a table as a header. Similarly, “tfoot” is for footer, such as summary last row. The “tbody” is for main body of the table. The {thead, tbody, tfoot} does not change any rendering. (use CSS for that)

When using “thead” or “tfoot”, you can use “th” instead of “td”, which will make it bold.

Note: by spec the “tfoot” is supposed to be placed before the “tbody” element.

Here's the source code:

<table border="1">
<thead>
<tr>
<th>cats</th>
<th>dogs</th>
</tr>
</thead>

<tbody>
<tr>
<td>7</td>
<td>6</td>
</tr>
</tbody>

<tfoot>
<tr>
<th colspan="2">Cats win!</th>
</tr>
</tfoot>

</table>

• http://dev.w3.org/html5/spec-author-view/the-thead-element.html#the-thead-element

See also:

• Simple HTML Table Examples
• HTML Table Examples with colgroup and col
• Styling HTML Table with CSS
• Pure CSS Table without “table” Tag