Accessible HTML Tables

I bet you, like me, remember how tables used to rule the Internet. Hell, I even thought with tables back then. Now, it should only be used for data, like it was intended to:

The Default Table

Let’s say you’ve got a table that shows your swimming records for January 2009, and the HTML would look like this:

<table border="1" cellspacing="0" cellpadding="0" class="oneBorder" width="50%">
<tr><th>Date</th><th>Meters</th></tr>
<tr>8th<td></td><td>2000</td></tr>
<tr>11th<td></td><td>4000</td></tr>
<tr>21st<td></td><td>1650</td></tr>
<tr>26th<td></td><td>3550</td></tr>
<tr>31st<td></td><td>1200</td></tr>
</table>

and the table, with given class and stylings, looks like this:

The Accessible Table

Now, when it comes to making it more accessible, you’ve got to enrich the table with more meta-information. The HTML would then look like this:

<table border="1" cellspacing="0" cellpadding="0" class="oneBorder" width="50%" summary="Meters swum on given dates through January 2009">
<caption>Swimming Records January 2009</caption>
<thead><tr><th scope="col">Date</th><th scope="col">Meters</th></tr></thead>
<tbody>
<tr><td>8th</td><td>2000</td></tr>
<tr><td>11th</td><td>4000</td></tr>
<tr><td>21st</td><td>1650</td></tr>
<tr><td>26th</td><td>3550</td></tr>
<tr><td>31st</td><td>1200</td></tr>
</tbody>
</table>

and then the table looks like this:

Attributes Legend

As you’ve seen in the markup above, there’s some attributes you generally don’t see on the Internet. Here’s a definition list of the added attributions:

Added attributions

scope=”col” – short for column; which way the <th>’s data goes (col for down, row for right)

thead – the header of the table, only use if the <th>s are on top

tbody – the body of the table, where the data is

caption – title of table (example: Swimming Records January 2009)

summary – tells what the table is about (example: Meters swum on given dates in January 2009)

Note: The summary-attribute won’t show for regular users. It’s there so the person using a screen reader will get an overview of the table layout before the table is read by the reader.

Further reading

If you’re in dire need of more information about screen readers, or accessibility in general, I would recommend buying the book called Web Accessibility: Web Standards and Regulatory Compliance:

I would go as far as calling it the “Bible of Accessibility”, because you learn alot through its 640 pages. It covers everything from using accessible markup, JavaScript and PDFs, to accessibility laws and compliances (such as 508 in the US).