HTML scope Attribute

HTML scope Attribute

The HTML scope attribute specifies which table cells a <th> header cell applies to. It can identify a header for a row, column, row group, or column group, helping browsers and assistive technologies understand the relationships within a table.

Elements That Use the scope Attribute

The scope attribute is used with the <th> element. It is not a conforming attribute for <td> elements.

Supported Values

The scope attribute is an enumerated attribute with four keywords.

If the attribute is omitted or contains an invalid value, it uses the Auto state and the browser determines the header's relationships from the table structure.

Using scope="row"

Use scope="row" when a <th> element identifies the cells associated with a row.

<table>
  <tr>
    <th scope="row">Web Design</th>
    <td>$500</td>
    <td>$750</td>
  </tr>
  <tr>
    <th scope="row">Web Hosting</th>
    <td>$10</td>
    <td>$20</td>
  </tr>
</table>

In this example, "Web Design" and "Web Hosting" identify the data cells that follow them in their respective rows.

Using scope="col"

Use scope="col" when a <th> element identifies the cells associated with a column.

<table>
  <tr>
    <th scope="col">Service</th>
    <th scope="col">Basic</th>
    <th scope="col">Premium</th>
  </tr>
  <tr>
    <td>Web Design</td>
    <td>$500</td>
    <td>$750</td>
  </tr>
</table>

The header cells in the first row identify the meaning of the data appearing below them in their respective columns.

Row and Column Groups

The rowgroup and colgroup values are used with tables that contain grouped rows or columns.

scope="rowgroup"

The rowgroup value indicates that a header applies to the remaining cells in the row group containing the header.

<tbody>
  <tr>
    <th scope="rowgroup" rowspan="2">Web Services</th>
    <th scope="row">Web Design</th>
    <td>$500</td>
  </tr>
  <tr>
    <th scope="row">Web Hosting</th>
    <td>$20</td>
  </tr>
</tbody>

A <th> using scope="rowgroup" must be anchored in a row group.

scope="colgroup"

The colgroup value indicates that a header applies to the remaining cells in its column group. A <th> using scope="colgroup" must be anchored in a column group.

When scope Is Omitted

The scope attribute is not required on every <th> element. When it is omitted, the attribute is in the Auto state and the browser determines whether the header acts as a row or column header from its position and the surrounding table structure.

<tr>
  <th>Service</th>
  <th>Price</th>
</tr>

Explicitly using scope="row" or scope="col" can make straightforward header relationships clear in the HTML and easier for authors to understand and maintain.

Accessibility

Correct table header relationships help assistive technologies provide useful context when users navigate data tables. The scope attribute can explicitly associate a header cell with the appropriate row, column, row group, or column group.

Use <th> for cells that actually function as headers rather than using <td> elements styled to look like headers. For more complex tables, additional table markup such as the headers attribute and unique header IDs may be appropriate when simple scope relationships are not sufficient.

Common Mistakes

Do not use the scope attribute on a <td> element. In current HTML, scope is a conforming attribute of <th>.

Do not confuse row with col. Use scope="row" for a row header and scope="col" for a column header.

Do not use scope="rowgroup" unless the header is anchored in a row group, or scope="colgroup" unless the header is anchored in a column group.

Do not use scope merely to style a table cell. The attribute defines semantic relationships between header cells and other cells in the table.

Browser Support

Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.

The scope attribute on the <th> element is widely supported in current core browsers.

Checking Browser Support

For current browser compatibility information, visit Can I Use? . Search for the HTML element or attribute you want to check. You can also narrow your search by entering an element name and attribute name separated by a colon. Search results can include related HTML features, element attributes, input types, APIs, and other technologies, so select the result that most closely matches the feature you are checking.

Try the scope Attribute

The example uses scope="col" for column headers and scope="row" for row headers, making the relationships between the table headers and data cells explicit.

Summary

The HTML scope attribute specifies which cells a <th> header applies to. Its row, col, rowgroup, and colgroup values describe different table header relationships, while an omitted or invalid value uses the Auto state. Correctly identifying table headers can make data tables easier for browsers and assistive technologies to interpret.