<thead>, <tbody>, <tfoot>
Group table rows for accessibility and sticky headers.
1Why Sectioning Helps
Splitting tables into <thead>/<tbody>/<tfoot> lets browsers print headers on each page, lets you make sticky headers with CSS, and improves screen reader navigation.
<table>
<thead>
<tr><th>Item</th><th>Qty</th><th>Price</th></tr>
</thead>
<tbody>
<tr><td>Apples</td><td>3</td><td>$3</td></tr>
<tr><td>Bread</td><td>1</td><td>$4</td></tr>
</tbody>
<tfoot>
<tr><th colspan="2">Total</th><td>$7</td></tr>
</tfoot>
</table>2Put the element in context
Table section elements organize header, body, and footer rows. Header associations matter more than decorative striping when the data is complex. A well-structured table should remain understandable when its borders and colors are removed.
3Practice with a small page
Separate a pricing comparison into thead and tbody, with a caption describing the subject. Use appropriate scope values on simple headers. Remove the styling temporarily and check whether a reader can still interpret each cell’s context.
Finished reading?
Mark this topic as complete to track progress.