← All rules

Tables

Headers need data cells to describe

• Rule: th-has-data-cells
• Severity: Serious
• WCAG level A

Why it matters

A <th> with no data cells under it usually means the table is being used for layout, or the header row is out of step with the body. Either way the announced structure does not match what is on screen.

How to fix it

1. Check that each header actually has cells in its column or row.
2. Use <td> for cells that are not headers.
3. If the table is only there for layout, replace it with CSS grid or flexbox.

In markup

<table>
  <tr><th>Region</th><th>Revenue</th></tr>
</table>

<table>
  <tr><th scope="col">Region</th><th scope="col">Revenue</th></tr>
  <tr><td>Berlin</td><td>1.2M</td></tr>
</table>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 1.3.1 Info and Relationships (opens in new tab) — WCAG level A

Further reading

Deque University on th-has-data-cells (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.