Lists & Tables

<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.

Example Code

<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>

Finished reading?

Mark this topic as complete to track progress.

Next Topic

colspan, rowspan & <colgroup>