th-has-data-cells

This validation checks that each <th> element in a data table actually functions as a header for one or more data cells. A table header must describe data in the table and be programmatically associated with those cells. If a header cell does not correspond to any data cells, assistive technology may present confusing or incorrect table relationships. Proper associations ensure users can understand how rows and columns relate when navigating a table.

Pass Patterns

Table headers describe the content of their corresponding column

The header cells correctly describe column data using the scope="col" attribute. Each header corresponds to the data cells beneath it.

<table>
    <caption>Employee Directory</caption>
    <tr>
        <th scope="col">Name</th>
        <th scope="col">Department</th>
        <th scope="col">Location</th>
    </tr>
    <tr>
        <td>Maria Chen</td>
        <td>Engineering</td>
        <td>Seattle</td>
    </tr>
    <tr>
        <td>David Singh</td>
        <td>Marketing</td>
        <td>London</td>
    </tr>
</table>

Table headers describe the content of their corresponding rows

Row headers correctly describe the data in their row using scope="row".

<table>
    <caption>Quarterly Sales</caption>
    <tr>
        <th scope="col">Quarter</th>
        <th scope="col">Revenue</th>
    </tr>
    <tr>
        <th scope="row">Q1</th>
        <td>$120,000</td>
    </tr>
    <tr>
        <th scope="row">Q2</th>
        <td>$135,000</td>
    </tr>
</table>

Fail Patterns

Incorrect scoping of table headers

The header cells are scoped incorrectly. They claim to be row headers even though they describe columns, which prevents proper associations with the data cells.

<table>
    <tr>
        <th scope="row">Name</th>
        <th scope="row">Department</th>
    </tr>
    <tr>
        <td>Maria Chen</td>
        <td>Engineering</td>
    </tr>
</table>

Table structured only with table headers

Header cells exist but do not correspond to any data cells, so they do not function as real table headers.

<table>
    <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>City</th>
    </tr>
    <tr>
        <th>Imari</th>
        <th>Henry</th>
        <th>Phoenix</th>
    </tr>
</table>

WCAG techniques

Sufficient techniques

• H51: Using table markup to present tabular information

Try It Yourself

Using a screen reader

1. Load the page and open a screen reader, then move focus into the data table.
2. Navigate cell by cell with the table-navigation commands of your screen reader.

Expected result: The screen reader announces the correct column or row header when you enter each data cell.

Actual result: Table cells are announced without the correct header or with misleading header information.

FAQ

Standards and Regulations

Personas impacted by this issue

• Screen Reader
• Braille

Learn More

• W3C’s Tables Tutorial

Related Issues

• table-duplicate-name
• empty-table-header
• td-headers-attr
• scope-attr-valid