The use of tables as the bedrock of page layout in HTML is well and truly over, having been taken out by the use of divs. This is a good thing because it means that tables can get back to concentrating on their real purpose, which is to complex data in a simple format. There are a lot of misconceptions about the use of tables in HTML and this post will hopefully dispel some of these myths by showing you how to display data using tables best practice and how to make these tables accessible to screen readers.

In this post we shall look at how to properly code a table so that it is accessible and easy to use.

The data we will use

For the sake of providing an example for this post, I have used a set of data from the UK Meteorological Office historic data from Newton Rigg. Of this data, I am only going to use data from years 2006, 2007 and 2008 and I will be using the maximum temperature, minimum temperature, rainfall and hours of sunshine averaged or totalled for each month.

The theory

In theory, the table should be simple to create but as tables become more complex, so does the markup. In principle, the best way to denote table headings is using an ID attribute, which is then carried over to each table cell that relates to it. In this way, you create a grid address for each table cell similar to the way that MS Excel™ references each cell in a spreadsheet.

Building the table

First of all, we have to get the table started:

<table summary=”This table shows monthly average maximum and minimum temperatures and total rainfall in millimetres recorded at Newton Rigg weather station between 2006 and 2008.” cols="4">
<caption>Newton Rigg weather data 2006 - 2008, UK Met Office.</caption>
</table>

Note that a caption has been provided to give a reader a clear indication of what the table is about. A summary is also provided to identify the purpose of the table. This is used in a similar way to ALT text.

Headers or Cells?

There are two types of cells within a table:

Table Header cells <th>

These are used to describe the column/row headers within the table and should be given special attention when defining a table that will meet accessibility requirements.

Table data cells <td>

These are the cells of the table that contain actual data or information that is cross-referenced against the header cells.

Defining header cells <th>

Next, we need to define the header cells that will give each column it’s context. This is done simply by adding two table rows <tr> followed by a series of <th> cells containing the relevant heading.

Once this is done, we can add a class to the <tr> tag so it can be styled later and we can get down to concentrating on making the table accessible.

We have four columns in our table, ‘Month’, ‘Max Temp’, ‘Min Temp’ and ‘Rainfall’. The associated <th> for each of these is given a unique identifier, such as id=”month”. This is what enables screen readers to give table cells their context as it reads the cell so it’s important to make the id attribute meaningful and descriptive. It quickly becomes repetitive for screen readers to keep repeating “maximum temperature: …, minimum temperature: …” for each entry. To prevent this, add an abbr attribute to the <th>. This will cause a screen reader to give the complete header the first time and then use the abbreviation each time thereafter.

You will also note that there are two rows of headings. This is because the year of data will change twice in the middle of the table. The year <th> spans all four columns.

<tr><th id="month">Month</th><th id="tmax" abbr="max">Maximum Temperature (&deg;C)</th><th id="tmin" abbr="min">Minimum Temperature (&deg;C)</th><th id="rfall" abbr="rain">Rainfall (mm)</th></tr>
<tr><th id="year" colspan="4">2006</th></tr>
<tr><th id="year" colspan="4">2007</th></tr>
<tr><th id="year" colspan="4">2008</th></tr>

Populating the data

Next we need to populate the data into the table and this is where the IDs for the headings are really important.

Each row contains four cells of data. Each of these cells is referenced back to its table headers. So, for example, the first cell is referenced to the year (e.g., 2006) and to the month title. Once we have th id in place, this is fairly simple – we reference them using the headers attribute. In the first column, we code <td headers=”year month”> whereas the second cell would be <td headers=”year tmax”>.

The order in which the headers attribute calls the column headers is important as this is the order in which a screen reader will read out the context of the data. In this case it will read (for the first row of data in our table) “2006 January, 2006 Max Temp degrees C 5.6, Min Temp degrees C 0.6, Rainfall mm 34.4”.

<tr><td headers="year month">January</td><td headers="tmax" class="tmax">5.6</td><td headers="tmin" class="tmin">0.6</td><td headers="rfall">34.4</td></tr>
<tr><td headers="year month">February</td><td headers="tmax">6.1</td><td headers="tmin">1.0</td><td headers="rfall">63.9</td></tr>

While this is a bloated way of making a table accessible, at the moment it is the only reliable way of doing so. Future changes to HTML may refine and change this method but at the moment (and until screen readers are updated in line with future HTML standards) this is the most likely method to work.

You can use CSS to style the table. Here I have used class attributes for tmax and tmin to change the style of these columns using CSS (I have only used grey backgrounds to do so). You can use class attributes to style whatever you want in your own tables, as long as in doing so you maintain sufficient contrast between the data and the background to make the data legible; you don’t want to go to all this effort to ruin it with your styling!

You can see the finished table here and view the complete code by selecting ‘view source’ in your browser on that page.

Further reading

The best place to find more information on the standards for table accessibility is at W3C Guidelines.