Back to Info and Examples for Accessibility Insights for Web
th-has-data-cells
A <th> element or element with role="columnheader" or role="rowheader" must have an associated <td> element.
Why it matters
When people with good vision see a table with a row or column header that has no associated data cells, they can tell at a glance that the data is missing. People who use assistive technologies must explore a table deliberately to discover its contents; they are likely to have difficulty interpreting a table with missing data cells.
How to fix
Make sure each <th> element has an associated data cell.
For details about accessible table markup, see Tables – WAI Web Accessibility Tutorials.
Example
Fail
<th> element) in this table has no associated data cells (<td> elements).
Assistive technology users are likely to find the table structure confusing.<table>
<tr>
<td scope="col">Name</th>
<th scope="col">E-mail</th>
<th scope="col">City</th>
</tr>
<tr>
<td>Mary Gonzales</td>
<td>mary@company.com</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>arvind@company.com</td>
</tr>
<tr>
<td>Selena Anders</td>
<td>selena@company.com</td>
</tr>
</table>
Pass
<th> elements have associated <td> elements.
The table structure is clear to everyone, and everyone can tell that some data cells are empty.<table>
<tr>
<th scope="col">Name</th>
<th scope="col">E-mail</th>
<th scope="col">City</th>
</tr>
<tr>
<td>Mary Gonzales</td>
<td>mary@company.com</td>
<td>Seattle</td>
</tr>
<tr>
<td>Arvind Gupta</td>
<td>arvind@company.com</td>
<td></td>
</tr>
<tr>
<td>Selena Anders</td>
<td>selena@company.com</td>
<td></td>
</tr>
</table>
About this rule
This rule passes if:
- All table header cells are associated with data cells that exist