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?
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>
<th scope="col">1999</th>
<th scope="col">2000</th>
<th scope="col">2001</th>
<th scope="col">2002</th>
<th scope="row">Grants</th>
<th scope="row">Donations</th>
<th scope="row">Investments</th>
<th scope="row">Fundraising</th>
<th scope="row">Sales</th>
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.