The CSS Anthology, Second Edition

137Tabular Data

Obviously, this is tabular data. We see column and row headings to which the data

in each cell relates. Ideally, we’d display this data in a table, as shown in Figure 5.2,

complete with table headings to ensure that the data’s 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 they’re easy to imple-

ment, can be used to ensure that the content of the table is clear when it’s read out

to visually impaired users who can’t 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