Web accessibility tutorials Guidance on how to create websites that meet WCAG
Jump to the navigation

Scope of Headers

Status: This is not ready for detailed review. It is an in-progress, unapproved editor’s draft.

Scope is the attribute used to define the direction and range of data cells that are covered by a header cell. For example a header cell that spans three columns with the scope value "colgroup" associates the header with the data cells in all three columns. The scope attribute should be used for all <th> cells where either the direction or range of data cell coverage needs to be clearly associated. @@@Or always?@@@. Possible values for the scope attribute are “row”, “col”, “rowgroup” or “colgroup”.

Table with header cells in one column only

This example has <th> elements for all cells in the left column of a table. The scope value “row” is used on each <th> cell to ensure that it cannot be mistaken as a header for other cells in the same column.

Example
Capital cities
Belgium Brussels
France Paris
Holland Amsterdam
Luxembourg Luxembourg
Spain Madrid
UK London
Code snippet:
<table>
  <caption>Capital cities</caption>
  <tr>
    <th scope="row">Belgium</th> <td>Brussels</td>
  </tr>
  <tr>
    <th scope="row">France</th> <td>Paris</td>
  </tr>
  <tr>
    <th scope="row">Holland</th> <td>Amsterdam</td>
  </tr>
  […]
</table>

Full code Example “Table with header cells in one column only”

Table with an offset (@@@internal?@@@) column of header cells

In this table the row header cells are in the second column rather than the first. The scope values "row" and has been used on the <th> second column cells to ensure that data cells in the first column, as well as those in cells to the right of the headers are correctly associated.

Example
Holidays taken in the last six months
PayrollRef. Name Jul Aug Sept Oct Nov Dec
215 Abel 5 2 0 0 0 3
231 Annette 0 5 3 0 0 6
173 Bernard 2 0 0 5 0 0
141 Gerald 0 10 0 0 0 8
99 Michael 8 8 8 8   4
Code snippet:
[…]
<tr>
  <td>215</td>
  <th scope="row">Abel</th>
  <td>5</td>
  <td>2</td>
  <td>0</td>
  <td>0</td>
  <td>0</td>
  <td>3</td>
</tr>
[…]

Full code for “Table with an offset column of header cells”

Table with headers spanning multiple rows or columns

In this example, some of the row header cells span two or more rows of data cells and one column header spans three columns.

Example
Poster availability
Poster name Color Sizes available
Zodiac Full color A2 A3 A4
Black and white A1 A2 A3
Sepia A3 A4 A5
Angels Black and white A1 A3 A4
Sepia A2 A3 A5
Code snippet:
[…]
<tr>
  <th scope="col">Poster name</th>
  <th scope="col">Color</th>
  <th colspan="3" scope="colgroup">Sizes available</th>
  </tr>
<tr>
  <th rowspan="3" scope="rowgroup">Zodiac</th>
  <td>Full color</td>
  <td>A2</td>
  <td>A3</td>
  <td>A4</td>
</tr>
[…]

Full code for “Table with headers spanning multiple rows or columns”

The following WCAG 2.0 technique was used in the examples above: