HTML and CSS Reference
In-Depth Information
Figure B-8
Using the scope attribute
<table border="1" cellpadding="5">
<tr>
<th
scope="col"
>Model</th>
<th
scope="col"
>Processor</th>
<th
scope="col"
>Memory</th>
</tr>
<tr>
<th
scope="row"
>Paragon 2.4</th>
<td>Intel 2.4GHz</td>
<td>256MB</td>
</tr>
<tr>
<th
scope="row"
>Paragon 3.7</th>
<td>Intel 3.7GHz</td>
<td>512MB</td>
</tr>
</table>
table
HTML code
A nonvisual browser that encounters the table in Figure B-8 can indicate to users
which rows and columns are associated with each data cell. For example, the browser
could indicate that the cell value “512MB” is associated with the Memory column and
the Paragon 3.7 row.
For more explicit references, HTML also supports the
headers
attribute, which speci-
fi es the cell or cells that contain header information for a particular cell. The syntax of
the
headers
attribute is
<td headers=”
ids
”> … </td>
where
ids
is a list of id values associated with header cells in the table. Figure B-9 dem-
onstrates how to use the headers attribute.
Figure B-9
Using the headers attribute
<table>
<tr>
<th
id="c1"
>Model</th>
<th
id="c2"
>Processor</th>
<th
id="c3"
>Memory</th>
</tr>
<tr>
<th
id="r1"
headers="
c1
">Paragon 2.4</th>
<td headers="
r1
c2
">Intel 2.4GHz</td>
<td headers="
r1
c3
">256MB</td>
</tr>
<tr>
<th
id="r2"
headers="
c1
">Paragon 3.7</th>
<td headers="
r2 c2
">Intel 3.7GHz</td>
<td headers="
r2
c3
">512MB</td>
</tr>
</table>
HTML code
table
Note that some older browsers do not support the
scope
and
headers
attributes.
For this reason, it can be useful to supplement your tables with
caption
and
summary
attributes in order to provide even more information to blind and visually impaired users.
See Tutorial 5 for a more detailed discussion of these elements and attributes.
