W3C home Web Accessibility Initiative (WAI) home

WAI: Strategies, guidelines, resources to make the Web accessible to people with disabilities

[DRAFT] Scope of headers

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".

Example 1: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.

Capital cities
Belgium Brussels
France Paris
Holland Amsterdam
Luxembourg Luxembourg
Spain Madrid
UK London

Code snippet

<tr>
<th scope="row">Belgium</th>
<td>Brussels</td>
</tr>

Full code Example 1:Table with header cells in one column only  (new window)

Example 2: 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.

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>

Full code for Example 2: Table with an offset column of header cells (new window)

Example 3: 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.

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

<th scope="col">Poster name</th>
<th scope="col">Color</th>
<th colspan="3" scope="coltroup">Sizes available</th>
</tr>
<tr>
<th rowspan="3" scope="rowgroup">Zodiac</th>
<td>Full color</td>

Full code for Example 3: Table with headers spanning multiple rows or columns (new window)

Related WCAG2.0 Techniques

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