137Tabular Data
Obviously, this is tabular data. We see column and row headings to which the data
in each cell relates. Ideally, wed display this data in a table, as shown in Figure 5.2,
complete with table headings to ensure that the datas structured logically.
Figure 5.2. The accounts data formatted as an HTML table
How do I ensure that my tabular data is
accessible as well as attractive?
Solution
The (X)HTML table specification includes elements and attributes that go beyond
the basics required to achieve a certain look for tabular data. These extra parts of
the table, which are often omitted by web developers, though theyre easy to imple-
ment, can be used to ensure that the content of the table is clear when its read out
to visually impaired users who cant see the layout for themselves. Take a look at
this example:
table.html (excerpt)
<table summary="This table shows the yearly income for years 1999
through 2002">
<caption>Yearly Income 1999 - 2002</caption>
<tr>
<th></th>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
</tr>
<tr>
<th scope="row">Grants</th>
<td>11,980</td>
<td>12,650</td>
<td>9,700</td>
<td>10,600</td>
</tr>
<tr>
<th scope="row">Donations</th>
<td>4,780</td>
<td>4,989</td>
<td>6,700</td>
<td>6,590</td>
</tr>
<tr>
<th scope="row">Investments</th>
<td>8,000</td>
<td>8,100</td>
<td>8,760</td>
<td>8,490</td>
</tr>
<tr>
<th scope="row">Fundraising</th>
<td>3,200</td>
<td>3,120</td>
<td>3,700</td>
<td>4,210</td>
</tr>
<tr>
<th scope="row">Sales</th>
<td>28,400</td>
<td>27,100</td>
The CSS Anthology138

Get The CSS Anthology, Second Edition now with O’Reilly online learning.

O’Reilly members experience live online training, plus books, videos, and digital content from 200+ publishers.