Table Sections
Group rows with thead, tbody, and tfoot.
Syntax
<table><thead>...</thead><tbody>...</tbody></table>You can organize a table into three sections for clarity and structure.
<thead>— groups the header rows.<tbody>— groups the main body rows.<tfoot>— groups the footer rows, such as totals.
These sections make large tables easier to read and style.
Example
Loading editor…
Press Run to see the result.
When to use it
- A large data table uses <thead>, <tbody>, and <tfoot> so browsers can scroll the body while keeping headers and totals fixed.
- A financial report table places column totals in <tfoot> so they remain at the bottom even when rows reorder.
- A printable table uses CSS to repeat <thead> on each printed page by targeting the thead element.
More examples
Table with thead, tbody, tfoot
<thead> holds column headers, <tbody> holds data rows, and <tfoot> holds summary or total rows.
<table>
<thead>
<tr><th>Item</th><th>Qty</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Course A</td><td>1</td><td>$29</td></tr>
<tr><td>Course B</td><td>2</td><td>$58</td></tr>
</tbody>
<tfoot>
<tr><th>Total</th><td>3</td><td>$87</td></tr>
</tfoot>
</table>Multiple tbody groups
Multiple <tbody> elements group rows into logical sections within a single table.
<table>
<thead>
<tr><th>Name</th><th>Dept</th></tr>
</thead>
<tbody>
<tr><td colspan="2"><strong>Engineering</strong></td></tr>
<tr><td>Alice</td><td>Frontend</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><strong>Design</strong></td></tr>
<tr><td>Bob</td><td>UX</td></tr>
</tbody>
</table>Colgroup for column-level styling
<colgroup> and <col> apply styles to entire columns without repeating classes on every cell.
<table>
<colgroup>
<col style="background: #f0f4ff;">
<col span="2" style="background: #fff;">
</colgroup>
<thead>
<tr><th>Name</th><th>Score</th><th>Grade</th></tr>
</thead>
<tbody>
<tr><td>Alice</td><td>95</td><td>A</td></tr>
<tr><td>Bob</td><td>82</td><td>B</td></tr>
</tbody>
</table>
Discussion