scope (HTML attribute)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Full | Full | Full | Full |
| Depr. | Version |
|---|---|
| No | HTML 4 |
Example
This
scope attribute of "col"
identifies the cells as part of the header cell’s
"colgroup":
<table border="1">
<tr>
<th colspan="4" scope="colgroup">Work Contact Points</th>
</tr>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Floor/Block</th>
</tr>
<tr>
<td>Fred</td>
<td>fred@megacorp.com</td>
<td>123456</td>
<td>1/A</td>
</tr
<tr>
<td>Bill</td>
<td>bill@megacorp.com</td>
<td>345678</td>
<th>3/C</th>
</tr>
</table>
Description
If your simple table
displays a single row of header cells—defines by the th
element—at the table’s top, followed by multiple rows of standard data
cells (tds), it should be obvious to the person viewing
the table, or using screen reader software to access it, that the headers
are column headers. This is also true of a table that has a single column
on the left-hand side consisting of th elements, and
multiple columns of td elements to its
right.
However, it’s good practice to make this relationship
absolutely clear, which you can do using the scope
attribute. In the HTML example, the scope attribute
for each of the th elements is set to
"col". If your table has table
headers along its top and down one side, the
scope attribute becomes even more important in
providing the necessary signposts for people using assistive
technology.
Value
The
attributes you’ll most commonly use with scope are
"col" and "row". However, if you’ve
also marked up your table with colgroup elements, you can make use of the
matching "colgroup" value to associate the header with
all the columns in that colgroup. One other attribute
is also available: "rowgroup" applies to a cell that’s
spanned using the rowspan
attribute.
Compatibility
| IE | 5.5 | Full |
|---|---|---|
| 6.0 | Full | |
| 7.0 | Full | |
| Firefox | 1.0 | Full |
| 1.5 | Full | |
| 2.0 | Full | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Full |
It’s difficult to state the browser compatibility for this attribute, as the issue depends on how well the assistive technology copes with this information. Regardless, the use of headers is the correct thing to do, so if you have complex tables, make an effort to ensure that you mark them up in a way that ensures that the data is accessible for all.
User-contributed notes
There are no comments yet.
Add a note
To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.
