Back to Learn
Pulseaccessibility

Table Headers Have Data Cells

What This Audit Checks

This audit verifies that every <th> element in a table has at least one associated <td> data cell. A table header that labels nothing is structurally broken and creates confusing announcements for assistive technologies.

Why It Matters

Screen readers use <th> elements to provide context when navigating table cells. An orphaned header with no data cells misleads users into thinking content exists in a column or row that is actually empty or nonexistent.

How to Fix It

  • Remove empty or unused <th> elements. If a column or row no longer exists, delete its header.
  • Check for colspan/rowspan mismatches. A <th> may appear orphaned if spanning attributes push data cells out of alignment.
  • Ensure <th> elements use scope to clarify whether they label a row or column, which helps assistive technologies associate headers with the correct cells.
<!-- Bad: "Notes" header has no data cells in its column -->
<table>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Notes</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
  </tr>
</table>

<!-- Good: every header has a data cell -->
<table>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>alice@example.com</td>
  </tr>
</table>

How Pulse Tracks This

Pulse flags this audit in your Lighthouse accessibility score. When the audit fails, Pulse shows which elements triggered it so you can fix them directly.

Resources