Scope Of Headers | Tables | WAI Web Accessibility Tutorials - W3C

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.

Capital cities

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

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

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

[…] <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.

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

[…] <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”

Related WCAG2.0 Techniques

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

• H63: Using the scope attribute to associate header cells and data cells in data tables

• Previous:Caption
• Next:Multi-level Tables

Whether you’ve found a typo or have an advanced WAI-ARIA example to be included in the tutorials, send suggestions to this (publicly-archived) mailing list or contibute directly to the code on Github.