Free scan

Fix "Table header without data cells" in HTML

Why it's a problem

A <th> must describe data. A header column with no data, or a table made only of <th>, breaks navigation: the screen reader announces headers that relate to nothing and the user can no longer link values to their meaning.

How to fix it — HTML

Remove header rows or columns that have no data, or fill them. If a cell holds data rather than a label, it is a <td>. If the table is only there for layout, replace it with CSS (grid or flex).

Avoid
<table>
  <tr><th>Offre</th><th>Prix</th><th>Remarques</th></tr>
  <tr><th>Gratuit</th><th>0 €</th></tr>
  <tr><th>Pro</th><th>29 €</th></tr>
</table>
Correct
<table>
  <tr><th scope="col">Offre</th><th scope="col">Prix</th></tr>
  <tr><th scope="row">Gratuit</th><td>0 €</td></tr>
  <tr><th scope="row">Pro</th><td>29 €</td></tr>
</table>

Check your site in 30 seconds

Conformly detects this kind of issue across all your pages, continuously, and alerts you on every regression.

Free scan

Other fixes