scope (HTML attribute)

Spec
Depr. Version
No HTML 4
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

scope=" { col | colgroup | row | rowgroup } "

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.

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>

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

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

It’s difficult to accurately state the browser compatibility for this attribute, as the issue depends on how well the assistive technology copes with this information. Regardless, using the scope attribute for simple tables helps to provide users with specific needs (primarily blind users) access to the data contained in the table.

Previous / Next page

  1. Previous
  2. Next

User-contributed notes

ID:
#1
Contributed:
by jandevries
Date:
Sat, 22 Nov 2008 18:45:30 GMT

In the last row of the example table the Floor/Block cell for contact Bill is declared as a table header instead of a data cell.

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.

Related Products