Table structure and captions

A caption gives the table a name. Put it immediately after the opening table tag.

<table>
  <caption>Recommended cycling routes</caption>
  <thead>
    <tr>
      <th scope="col">Route</th>
      <th scope="col">Distance</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Harbor loop</th>
      <td>8 km</td>
    </tr>
    <tr>
      <th scope="row">Forest trail</th>
      <td>21 km</td>
    </tr>
  </tbody>
</table>

thead groups header rows. tbody groups the main data rows. tfoot can group summary rows.

These groups make a long table easier to understand and style. They do not create headers by themselves; you still need th elements.

The scope attribute makes the relationship explicit:

• scope="col" labels cells in the same column
• scope="row" labels cells in the same row

For a simple table, browsers can often infer these relationships. Adding scope makes your intent clear and helps assistive technology with more involved tables.

Avoid complicated combinations of rowspan and colspan when a simpler table would communicate the data better.

Use th for header cells and td for data cells. Row headers in the first column are a strong pattern for tables where each row is one record.

The caption should name the table, not repeat the page heading. “Recommended cycling routes” works. “Table” does not.

If someone reads the table with a screen reader, they hear the caption first, then headers tied to each cell. That only works when headers are real th elements with clear scope.

Long tables benefit from thead staying visible when CSS sticky headers are added later. The HTML structure you choose now makes those presentation upgrades easier.

Do not use th for styling. If a cell holds data, use td. Reserve th for cells that label a row or column.

Quick check

Start quiz

Result

You got of right.

Try again