1. Accessibility & Legislation
  2. Common Issues
  3. Testing & Tools
  4. Analysing Your Site

2.03.02 Data tables: Complex data tables

Explanation

As previously stated data tables can be defined as tables that present relational information, like a bus time table.

For "complex" tables, i.e. where tables have structural divisions beyond those implicit in the rows and columns, use appropriate markup to identify those divisions.

A good way to approximate what some screen-reader users will hear when accessing a complex table is to hold a ruler to the table, and read straight across the screen. Then, move the ruler down until the next line of characters is displayed. Read straight across. After a while, pick a data cell at random and, without looking at the column or row title, try and remember what headers describe that data point. The larger and more complex the table, the harder it would be to remember the row and column relationships.

The simplest solution is to break down complex tables into two or more simpler tables, if that is not possible then use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the "axis", "scope", and "headers" attributes, to describe more complex relationships among data. See the WAI recommended techniques on good HTML practice for defining logical relationships in tables.

Other examples of the coding used for tables can be found at http://www.eere.energy.gov/communicationstandards/web/tables.html.

Example of a complex data table

Table example from Juicy Studio.

CD Collection
CD Description
Artist Album Genre Year
Compiled 27th May 2003
The Clash London Calling Punk Rock 1979
Supergrass In it for the money Brit Pop 1996
Feeder Swim Rock 2001

How should a complex data table be coded?

For a complex table we add column grouping:

<table summary="This table describes a very limited CD collection">
  <caption><abbr title="Compact Disc">CD</abbr> Collection</caption>
  <colgroup span="2" />
  <colgroup span="2" />
  <thead>

And add ids to the table headers:

  <thead>
    <tr>
      <th colspan="2" id="cd"> CD </th>
      <th colspan="2" id="description"> Description </th>
    </tr>
    <tr>
      <th id="artist"> Artist </th>
      <th id="album"> Album </th>
      <th id="genre"> Genre </th>
      <th id="year"> Year </th>
    </tr>
  </thead>

Finally each cell is marked as to which ids it belongs to:

  <tbody>
    <tr>
      <td headers="cd artist">The Clash</td>
      <td headers="cd album">London Calling</td>
      <td headers="description genre">Punk Rock</td>
      <td headers="description year">1979</td>
    </tr>
etc...

How it looks in HTML:

<table summary="This table describes a very limited CD collection">
<caption><abbr title="Compact Disc">CD</abbr> Collection</caption>
<colgroup span="2" />
<colgroup span="2" />
<thead>
  <tr>
    <th colspan="2" id="cd">CD</th>
    <th colspan="2" id="description">Description</th>
  </tr>
  <tr>
    <th id="artist">Artist</th>
    <th id="album">Album</th>
    <th id="genre">Genre</th>
    <th id="year">Year</th>
  </tr>
</thead>

<tfoot>
  <tr>
    <td colspan="4">Compiled 27th May 2003</td>
  </tr>
</tfoot>

<tbody>
  <tr>
    <td headers="cd artist">The Clash</td>
    <td headers="cd album">London Calling</td>
    <td headers="description genre">Punk Rock</td>
    <td headers="description year">1979</td>
  </tr>
  <tr>
    <td headers="cd artist">Supergrass</td>
    <td headers="cd album">In it for the money</td>
    <td headers="description genre">Brit Pop</td>
    <td headers="description year">1996</td>
  </tr>
  <tr>
    <td headers="cd artist">Feeder</td>
    <td headers="cd album">Swim</td>
    <td headers="description genre">Rock</td>
    <td headers="description year">2001</td>
  </tr>
</tbody>

</table>
Next: Summary