Accessibilty of Tables

Using "scope"

The "scope" attribute can be used to associate header information with columns and rows (and also column groups and row groups).

Example 3.27 - Table with 'scope' attribute - Example 3.27 | Example 3.27 JSFiddle
<table>
<caption>United States Urban and Rural Populations</caption>
<thead>
<tr>
<th scope="col">Year</th>
<th scope="col">Percent Urban</th>
<th scope="col">Percent Rural</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">Data from<a href="http://www.census.gov/">United States Census Bureau</a></td>
</tr>
</tfoot><tbody>
<tr>
<th scope="row">2010</th>
<td>80.3</td>
<td>19.7</td>
</tr>
<tr>
<th scope="row">2000</th>
<td>79.2</td>
<td>20.8</td>
</tr>
<tr>
<th scope="row">1950</th>
<td>64.0</td>
<td>36.0</td>
</tr>
<tr>
<th scope="row">1900</th>
<td>39.6</td>
<td>60.4</td>
</tr>
<tr>
<th scope="row">1850</th>
<td>15.4</td>
<td>84.6</td>
</tr>
<tr>
<th scope="row">1800</th>
<td>6.1</td>
<td>93.9</td>
</tr>
</tbody>
</table>
United States Urban and Rural Populations
YearPercent UrbanPercent Rural
Data from United States Census Bureau
201080.319.7
200079.220.8
195064.036.0
190039.660.4
185015.484.6
18006.193.9
 

Copyright © David Heitmeyer