Ensure each table header has data cells

Screen readers have features to make navigating tables easier. In order for screen readers to be able to help users navigate tables easier, table headers must refer to some set of cells. Lighthouse reports when <th> elements and elements with [role="columnheader"/"rowheader"] do not have the data cells they describe.

How to fix this problem

To fix this problem, markup tables semantically and with the correct header structure. The following table isn't structured correctly; there's a table header column, "Marathon pace", without table data cells:

<table>
<caption><strong>My marathon training log</strong></caption>
<thead>
<tr>
<th scope="col">Week</th>
<th scope="col">Total miles</th>
<th scope="col">Longest run</th>
<th scope="col">Marathon pace</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">1</th>
<td>14</td>
<td>5</td>
</tr>

<tr>
<th scope="row">2</th>
<td>16</td>
<td>6</td>
</tr>

</tbody>

</table>

To fix this table, add the missing table data cells for the table header column, "Marathon pace":

<table>
<caption><strong>My marathon training log</strong></caption>
<thead>
<tr>
<th scope="col">Week</th>
<th scope="col">Total miles</th>
<th scope="col">Longest run</th>
<th scope="col">Marathon pace</th>
</tr>
</thead>

<tbody>
<tr>
<th scope="row">1</th>
<td>14</td>
<td>5</td>
<td>12.30</td>
</tr>

<tr>
<th scope="row">2</th>
<td>16</td>
<td>6</td>
<td>12.10</td>
</tr>

</tbody>

</table

Screen readers announce the table headers when it comes to each table data cell. If the headers and data cells don't match up, it's very confusing to screen reader users. Learn more in All <th> elements and elements with role="columnheader" or role="rowheader" must have data cells they describe.

More information

Last updated: Improve article