Tables and accessibility

Table structure and captions

Add a caption, group table rows, and associate column or row headers clearly enough for complex data to remain understandable.

8 minute lesson

~~~

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

A caption names the table. Headers describe the data cells.

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

Quick check

Result

You got of right.

Lesson completed