HTML scope Attribute

Introduction

The scope attribute is used on <th> header cells in HTML tables to describe which cells a header labels. It helps screen readers and other assistive technologies understand row and column relationships, making tabular data easier to navigate for everyone.

What You’ll Learn

Purpose of scope

The main purpose of the scope attribute is to specify the relationship between header cells (<th>) and the data cells (<td>) they describe. Without this hint, a screen reader user hearing “$10,000” may not know whether it is January’s revenue or February’s expenses.

By marking column headers with scope="col" and row headers with scope="row", you expose the table’s logical structure to assistive technology in a simple, declarative way.

📝 Syntax

Add scope to <th> elements with one of four keyword values:

<th scope="col">Revenue</th>
<th scope="row">January</th>

Syntax Rules

• Valid on <th> elements in <table>, <thead>, <tbody>, and <tfoot>.
• Value must be one of: row, col, rowgroup, or colgroup.
• Use col for headers that label columns; row for headers that label rows.
• Use rowgroup or colgroup when a header spans a group via rowspan or colspan.
• Do not use scope on <td> data cells—use <th> for headers instead.
• For very complex tables, the headers attribute on <td> can complement or replace scope.

💎 Values

The scope attribute accepts exactly four enumerated values:

• row — The header applies to all cells in the same row (typical for the first cell in a data row).
• col — The header applies to all cells in the same column (typical for headers in <thead>).
• rowgroup — The header applies to a group of rows, often when the <th> spans multiple rows with rowspan.
• colgroup — The header applies to a group of columns, often when the <th> spans multiple columns with colspan.

<!-- Column header in thead -->
<th scope="col">Month</th>

<!-- Row header in tbody -->
<th scope="row">January</th>

<!-- Header spanning a row group -->
<th scope="rowgroup" rowspan="2">Q1</th>

Applicable Elements

scope vs headers vs id

Start with scope for straightforward data tables. Reach for headers when a single data cell is labeled by multiple non-adjacent headers.

Examples Gallery

Monthly report with column and row headers, rowgroup for quarterly sections, and dynamic th.scope in JavaScript.

<table>
  <caption>Monthly Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Revenue</th>
      <th scope="col">Expenses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">January</th>
      <td>$10,000</td>
      <td>$7,000</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>$12,000</td>
      <td>$8,500</td>
    </tr>
  </tbody>
</table>

<table>
  <thead>
    <tr>
      <th scope="col">Quarter</th>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="rowgroup" rowspan="2">Q1</th>
      <th scope="row">January</th>
      <td>100</td>
    </tr>
    <tr>
      <th scope="row">February</th>
      <td>120</td>
    </tr>
  </tbody>
</table>

<table id="dataTable">
  <tr>
    <th id="dynamicHeader">Name</th>
    <td>John</td>
  </tr>
</table>

<script>
  document.getElementById("dynamicHeader").scope = "row";
</script>

♿ Accessibility

• Use scope on every th — Mark column headers scope="col" and row headers scope="row" consistently.
• Add a caption — <caption> gives the table a title for all users, not just screen reader users.
• Prefer th over styled td — Do not use <td> with bold styling as a fake header; use <th> with scope.
• Test with a screen reader — NVDA, JAWS, or VoiceOver should announce header associations correctly.
• Complex tables need headers — When scope alone is insufficient, link cells with the headers attribute.

💡 Best Practices