Th Scope

title: "th and Scope — Associating Headers with Data Cells in Tables" description: "Learn how to use th with scope attributes (col, row, colgroup, rowgroup) to correctly associate table headers with their data cells." weight: 3 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, tables]

The th element defines header cells, and the scope attribute tells screen readers whether the header applies to a column, row, or group of columns or rows.

## What You'll Learn

How to use scope values correctly for simple and complex table headers.

## Why It Matters

Without scope, screen readers guess which cells are headers, often making incorrect associations. Proper scope ensures every cell is correctly identified.

## Real-World Use

In a product comparison table, the first column has product names (scope="row") and the first row has feature names (scope="col"). A screen reader navigating to cell (3,2) announces "Product C, Battery Life, 10 hours."

## Scope Values

```html
<table>
  <caption>Product features</caption>
  <tr>
    <th scope="col">Feature</th>
    <th scope="col">Product A</th>
    <th scope="col">Product B</th>
    <th scope="col">Product C</th>
  </tr>
  <tr>
    <th scope="row">Price</th>
    <td>$99</td>
    <td>$129</td>
    <td>$149</td>
  </tr>
  <tr>
    <th scope="row">Battery</th>
    <td>8 hours</td>
    <td>10 hours</td>
    <td>12 hours</td>
  </tr>
</table>

Row Group and Column Group

<table>
  <caption>Employee directory</caption>
  <tr>
    <th scope="colgroup" colspan="2">Contact Information</th>
    <th scope="colgroup" colspan="2">Address</th>
  </tr>
  <tr>
    <th scope="col">Name</th>
    <th scope="col">Email</th>
    <th scope="col">City</th>
    <th scope="col">State</th>
  </tr>
  <tr>
    <th scope="row">Alice</th>
    <td>alice@example.com</td>
    <td>Portland</td>
    <td>OR</td>
  </tr>
</table>

Common Mistakes

1. Missing scope on th

th elements without scope may not be associated with the correct cells.

2. Using scope="col" on row headers

Row headers should use scope="row". Column headers use scope="col".

3. Forgetting scope on multi-level headers

When headers span rows or columns, use scope="rowgroup" or scope="colgroup".

4. No th for row labels

The first cell in each row should be a th with scope="row" to label the row.

5. Using td instead of th for headers

Header cells must use th, not td. td cells are data cells without header semantics.

Practice Questions

1. What scope value should a column header use? scope="col" indicates the header applies to the column below it.

2. What scope value should a row header use? scope="row" indicates the header applies to the row to its right.

3. What scope value is used for a header that spans multiple columns? scope="colgroup" indicates the header applies to a group of columns.

Challenge: Create a table with column headers, row headers, and a multi-level header row using colspan and scope="colgroup".

FAQ

Mini Project

Create a weekly schedule table with days as column headers and time slots as row headers. Use scope correctly for both dimensions.

What's Next

Learn about the Headers Attribute for complex tables where scope alone cannot create correct associations.