Table headers must have data cells

WCAG 1.3.1
Info and Relationships

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

<th> must label actual data — if there’s no data, don’t use <th>.

Why this matters and how to fix it

Why this matters

A <th> defines a label for one or more data cells. If a table contains <th> elements without any corresponding <td> cells, screen readers treat the table as having headers with no data context, making the table confusing or meaningless.

How to fix this issue

Use <th> only when the cell is labeling associated data cells. If the table is not actually tabular data (e.g., layout or spacing), remove <table> or replace <th> with <td>. If the table is valid, ensure there is at least one row of data (<td>) associated with each header.

Automated detection · Manual review recommended

Developer guidance

This issue occurs when table headers exist without any data rows. In your components, ensure tables are only rendered when data is available. If content loads asynchronously, wait to render header rows until data is ready. The GetWCAG scanner flags these orphaned header cells to help maintain a clear and logical table structure.

Code examples

Incorrect Implementation

<table><tr><th>Header</th></tr></table>

Correct Implementation

<table><tr><th>Header</th><td>Value</td></tr></table>

Real-World Examples

Before

<table class="stats"><tr><th>Status</th></tr></table> <!-- table shows a title but no data rows -->

After

<table class="stats">
  <tr><th>Status</th><td>Active</td></tr>
</table>

CSS Example (Guidance)

/* Style table headers for clarity */
th {
  font-weight: 600;
  background-color: #f3f4f6;
  text-align: left;
  padding: 8px;
}
td {
  padding: 8px;
}

Manual testing

  1. 1. Inspect the table in the browser.
  2. 2. Check whether <th> elements appear without any corresponding <td> cells.
  3. 3. If the table has <th> but no data rows, confirm whether the table is actually needed.
  4. 4. If the table should contain data, ensure at least one <td> exists per <th> context.
  5. 5. If the table is decorative, replace it with non-table markup.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance