HTML tables. Not totally bad. Part three: Putting tables into practise

Published by James on the 24th January 2008 2 Comments »

As promised last week, here is the third and final part of my “HTML tables. Not totally bad.” series.

In part one I expressed my frustration with the misunderstandings surrounding the use of tables in standards based web design. In part two I talked through the elements available as part of the table and some of there attributes. In this, part three, I’ll give three examples of how to construct meaningful, semantically correct, accessible tables using those elements and attributes. I’ll also show how some simple CSS can spruce them up and make them suitable for even the most elegant design.

I’ve published each example on it’s own page so you can copy them as is to use yourself, click through to see each one.

Example 1 – School exam results

In this first example I’ve used a classic example of tabular data; a set of exam results. The results in question are the fictitious results from three summer exams for both boys and girls at a secondary (high) school. The three exams sat were: English Language, English Literature and Mathematics.

Example 1 - School exam results

A quick peek at the source of the example page will show you that the thead, tfoot and tbody elements have been put to good use here to separate out the headings across the top row, the data rows and the overall totals at the bottom. Using these elements not only lets us add logical meaning to the data, but it also lets us style those areas of the table differently using some simple CSS (all the CSS is in the source of each example for completeness).

Eagle-eyed readers may also have spotted a new attribute that I’d not included in the previous posts; “scope”. Setting the scope attribute will let assistive technologies explicitly tie each heading to the data cells it applies to; in this example letting screen readers read the headings out before reading the numbers of students with each grade. Thanks to Mr Christian Heilmann and his Automatic conversion from simple, accessible data tables to YUI Charts article over at the Yahoo! User Interface Blog for making me aware of this attribute and its importance.

Example 2 – A system dashboard

This second example is a little bit different. I’ve mocked up how to potentially use a series of tables to create a “dashboard” overview screen for a user in a web application (something I’ve had to build for 99% of all the “enterprise” applications I’ve ever worked on)

I’ve used the example of a Request For Quote (RFQ) application which basically allows people to get in touch with a number of potential suppliers and ask for a quote for some materials / work they want them to do. Once sent out there are three types of RFQ:

1. open – those that are still open for reply from the suppliers contacted (RFQs generally have a “respond by date”
2. closed – those that have reached and past their respond by date. These need the person who set them up to look through the responses and decide whether to pick a winning supplier, re-issue or complete them without a winner
3. completed – these are RFQs that have either has a quote that has been accepted, has been with drawn or has been completed by the person who raised it without picking a winner.

Example 2 - RFQ Dashboard

Note how in the Completed RFQs table the footer is used to provide navigation to the archived RFQs. This same technique could be used for a table of search results if there are two many to display at once. The “Results page: 1 2 3 4 5” links could be placed in the footer of the results table to tie them semantically to the currently displayed results.

Example 3 – Mixing in a little more CSS to sex-up data

This final example shows how with a little lateral thinking you can mark up a set of data in an accessible, semantically correct manor and still make it look great (or at least, more colourful) for the more visually orientated out there.

This is a very simple example of what can be done. For more advanced demonstrations I’d recommend Mr Eric Meyer’s CSS vertical bar graphs.

Example 3 - Using CSS to add colour

To achieve this effect a little work would need to be done on the server side of things to generate the correct values for the class attributes, as the CSS relies on the class to determine the position of the background image.

So there you have it, three different ways of using the table and its associated elements and attributes. I hope these examples have given you some food for thought. Feel free to use and abuse them, they are free for use however you see fit.

Posted in Interface Design |