Turning the Tables

July 29th, 2007

Repeat after me: “Tables are evil, and must be destroyed”. Now, lest you think I’ve got a vendetta going here against IKEA, let me assure you that the tables I’m talking about are those first defined in 1994’s guidelines for HTML 2.0 as a means of displaying data content in an ordered and helpful manner.

Of course it was all downhill from there. Some clever dicky worked out that tables could be used to display complete pages in an ordered manner. (Note I did not say helpful.)

By the birth of HTML 3.2 almost all websites were infested with tables, nesting content to within a pixel of their existence. I’m just as guilty as anyone of thinking in a completely obsessive-compulsive way that tables were the only way to fly.

Today, in the era of XHTML and CSS and the accessible Sematic ideal for content, we all know better. Tables are evil, and must be destroyed!

But hang on. The introduction of tables in 1994 was for a reason. There are times when we need to display data content in an ordered and helpful manner. So, as a content expert, how do you do tables in an accessible way?

 

A Simple Table

The basic code …
<table>
mm<tr>
mmmm<td>Column 1</td>
mmmm<td>Column 2</td>

mm</tr>
mm<tr>
mmmm<td>Item 1</td>
mmmm<td>Item 2</td>
mm</tr>

mm<tr>
mmmm<td>Item 3</td>
mmmm<td>Item 4</td>
mm</tr>
</table>

 

produces …

Column 1 Column 2
Item 1 Item 2
Item 3 Item 4

By adding border, padding and spacing codes to the basic structure

<table border="1" cellpadding="2" cellspacing="2">

you can get

Column 1 Column 2
Item 1 Item 2
Item 3 Item 4

mm
The great guru of CSS Eric Meyer, produced two major books on using CSS to control tabular layout but dramatic as the results are they are not very accessible.

The problem is that while a table is obvious to the sighted user of a webpage, for anyone using a screen reader such a s JAWS. While screen readers can enable users to read accross rows and up and down columns as required, they need “signposts” to help then on their way.

The Basic Requirements

<caption>

Web deisgners often title data tables by using one of the common tags such as <h> or <p> or even a <div>. However the <caption> is the most accessbile way to associate the table title with the table itself. By default, ‘caption’ centres the title immediately above the table but using CSS it can be repositioned or restyled at will.

<caption> should come immediately after the <table> tag, thus …

<table>
mm<caption>This is the title for this table</caption>
mm<tr>

summary
Not a standalone tag but an attribute to be placed inside the <table> tag, thus …

<table summary=”This table displays the contents of this exercise. There are two columns”>

The contents of summary are not displayed by ordinary browsers but can be used by assistive browsers to help the user to understand what the table is all about. It should explain the table’s purpose and outline its overall structure. Most screen readers annonce the summary first to help the user interpret what is there. As the table gets increasingly complicated with multiple headings and layered structre summary gets increasingly important.

<th>

The <th> tag is used to indicate headings for rows or columns. In visual browsers it appears as a normal <td> table cell, but it’s much more infomative to users of assistive browsers. Unlike other tags, you should never use the <th> in positional tables (but you’d NEVER use positional tables anyway, would you?)

Top and Tail

For completeness, you should remember <thead>, <tbody> and <tfoot>; while not strictly required for accessible layout, these three codes allow the table to be grouped together into three separate sections.

The main benefit is that with very long tables they allow the header and footer to appear on every page. In certain browsers they allow the body of the table to be scrolled independently of the header and footer; this is most useful when designing pages to be viewed on devices with smaller screens such as mobile devices. If using <thead> and <tfoot> you MUST use <tbody>.

With this in mind, our simple table now looks like …

<table summary=”This table displays the contents of this exercise. There are two columns”>

mm<caption>This is the title for this table</caption>
mm<thead>
mmmm<tr>
mmmmmm<th>Column 1</th>
mmmmmm<th>Column 2</th>

mmmm</tr>
mm</thead>
mm<tbody>
mmmm<tr>
mmmmmm<td>Item 1</td>

mmmmmm<td>Item 2</td>
mmmm</tr>
mmmm<tr>
mmmmmm<td>Item 3</td>
mmmmmm<td>Item 4</td>

mmmm</tr>
mm</tbody>
mm<tfooter>
mm</tfooter>
</table>

Accessible layout techniques for more complex tables will be covered in a later posting.



Leave a Reply