Add headers to tables

In this example, the top row of the table is a header:

Notice how without the header here, it would be almost impossible to understand what the individual values mean ("Washington" could be a city or a surname).

It is not enough to just make the headers look differently, as accessible technologies will not recognize this (for example, a screen reader cannot 'see' different colors or fonts). Table headings must be defined using the <th> tag.

This example shows how a table should use a <th> to mark cells as headings. Note the use of the col attribute, to specify these headings are for the column:

<table>
  <tr>
    <th scope="col">First name</th>
    <th scope="col">City</th>
  </tr>
  <tr>
    <td>Washington</td>
    <td>London</td>
  </tr>
  <tr>
    <td>Phoenix</td>
    <td>Arizona</td>
  </tr>
  <tr>
    <td>Austin</td>
    <td>Travis</td>
  </tr>
</table>

Tables which are used purely for layout do not need to do this. However, the use of tables for layout is strongly discouraged. This check will ignore tables that it believes are purposely used for layout.

Learn more about accessible table design (W3C).