---
title: Table <th> Needs Data Cells | Accessibility Rule
description: Table headers in a data table must refer to data cells
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/th-has-data-cells
  md: https://testingbot.com/support/accessibility/web/rules/th-has-data-cells/index.md
---
# Ensure that \<th\> elements and elements with role=columnheader/rowheader have data cells they describe

Rule ID: th-has-data-cellsUser Impact: seriousGuidelines: WCAG 2.0

In data tables, each header cell (`<th>`) should be properly associated with corresponding data cells (`<td>`) to convey clear relationships between header and data content.

## About This Rule

This guideline ensures that table headers are correctly associated with data cells, enhancing accessibility for users who rely on assistive technologies. Adhering to this practice aligns with the following standards:

- WCAG 2.1 (A): 1.3.1 Info and Relationships
- WCAG 2.0 (A): 1.3.1 Info and Relationships
- WCAG 2.2 (A): 1.3.1 Info and Relationships
- Section 508: 1194.22(g) - Row and column headers shall be identified for data tables.
- Trusted Tester: 14.B - All data cells are programmatically associated with relevant headers.
- EN 301 549: 9.1.3.1 Info and Relationships

## Why It Matters

Screen readers rely on accurate table markup to interpret and announce the relationships between headers and data cells. Improperly marked-up tables can lead to confusing or inaccurate output, hindering users' ability to understand the table's content and structure. Ensuring that each `<th>` element is associated with relevant data cells enhances accessibility for users with visual impairments.

## How to Fix

To ensure proper associations:

- **Use the `scope` Attribute:** Assign the `scope` attribute to `<th>` elements to define whether they act as headers for rows, columns, or groups. 

    <table>
      <thead>
        <tr>
          <th scope="col">Last Name</th>
          <th scope="col">First Name</th>
          <th scope="col">City</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Doe</td>
          <td>John</td>
          <td>New York</td>
        </tr>
        <!-- Additional rows -->
      </tbody>
    </table>

- **Avoid Using the `headers` Attribute in `<th>` Elements:** The `headers` attribute should not be used within `<th>` elements. Instead, utilize the `scope` attribute to define header associations. 
- **Ensure Each `<th>` Has Associated Data Cells:** Verify that every `<th>` element serves as a header for one or more `<td>` elements within the same table. 

### Examples

#### Incorrect

A table with `<th>` elements using incorrect `scope` attributes:

    <table>
      <tr>
        <th scope="row">Last Name</th>
        <th scope="row">First Name</th>
        <th scope="row">City</th>
      </tr>
      <tr>
        <td>Doe</td>
        <td>John</td>
        <td>New York</td>
      </tr>
      <!-- Additional rows -->
    </table>

#### Correct

A table with `<th>` elements using appropriate `scope` attributes:

    <table>
      <tr>
        <th scope="col">Last Name</th>
        <th scope="col">First Name</th>
        <th scope="col">City</th>
      </tr>
      <tr>
        <td>Doe</td>
        <td>John</td>
        <td>New York</td>
      </tr>
      <!-- Additional rows -->
    </table>

## More Information

- [W3C: Using id and headers attributes to associate data cells with header cells in data tables](https://www.w3.org/WAI/WCAG21/Techniques/html/H43)

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [valid-lang](https://testingbot.com/support/accessibility/web/rules/valid-lang)
- [video-caption](https://testingbot.com/support/accessibility/web/rules/video-caption)
- [autocomplete-valid](https://testingbot.com/support/accessibility/web/rules/autocomplete-valid)
- [avoid-inline-spacing](https://testingbot.com/support/accessibility/web/rules/avoid-inline-spacing)
- [target-size](https://testingbot.com/support/accessibility/web/rules/target-size)