<thead>, <tbody>, <tfoot>
Groups of table rows: the head, the body and the footer.
Syntax
<table>
<thead>…</thead>
<tbody>…</tbody>
<tfoot>…</tfoot>
</table>Examples
An order table with a total:
<style>
table { border-collapse: collapse; }
td, th { padding: 4px 10px; text-align: left; }
thead { background: #eee; }
tfoot { font-weight: bold; border-top: 2px solid #333; }
</style>
<table>
<thead><tr><th>Item</th><th>Price</th></tr></thead>
<tbody>
<tr><td>Latte</td><td>$4.50</td></tr>
<tr><td>Croissant</td><td>$3.00</td></tr>
</tbody>
<tfoot><tr><td>Total</td><td>$7.50</td></tr></tfoot>
</table>Notes
If you omit <tbody>, the browser adds it itself — keep that in mind with selectors like table > tr, which then match nothing. When a long table is printed, <thead> is repeated on every page.
See also
- <table> — A table made of rows (`<tr>`) and cells.
- <td>, <th> — Table cells: `<td>` holds data, `<th>` is a header cell.
- <caption> — The title of a table.
Related recipes
In the tutorial
- Tables — Tables in HTML — rows and cells, column headers, thead, tbody, tfoot and caption, merging cells.