WebAIM - Web Accessibility In Mind

E-mail List Archives

RE: Tables for layout

for

From: Jukka Korpela
Date: Mar 20, 2002 5:14AM

Sharon Daniels wrote:

> If you are using a table for layout, are you supposed to have
> a table header at all?

No. As you mentioned, the recommendation tells us _not_ to use e.g. <th> at
all when the table is for layout only.

> Say you just had one table that had 3 cells. One for email
> address, one for name, and one for a submit button. Isn't it
> appropriate to not have a table header on that kind of table?

If the only purpose of a table is layout, then the primary recommendation is
to use style sheets instead; this isn't _yet_ always a realistic policy. The
secondary recommendation is that layout tables should not contain markup
like <th>. The point is that such a table cannot logically contain headers.
On the practical side, <th> markup could confuse software intended to make
data tables accessible to different groups of users or in different
situations. We don't want a program read a layout table as if it were
structural, just because an author used <th> for bolding and centering.

But is your table purely for layout? It seems to group logically related
elements together. On the other hand, it doesn't sound like a complete
table. Shouldn't it rather be something like the following (inside a <form>
element of course):

<table>
<tr><th>Name:</th> <td><input type="name"></td> </tr>
<tr><th>E-mail address:</th> <td><input type="email"></td> </tr>
<tr><td rowspan="2"><input type="submit"></td> </tr>
</table>

In this case, the <th> elements really act as sort-of headers for their
rows. And it really isn't a "layout table", but a data table: it is
logically a matrix. In fact, a logically oriented author would use <th> _in
spite of_ its common visual presentation! (He probably intends to say
something like th { text-align:left; } in his style sheet in an attempt to
make the presentation better.)

There's of course lot of markup that could, and perhaps should, be added.
Maybe
<table summary="The first column contains field names. The second
column contains the input fields themselves. The last row
contains a submit button only."

Or you might consider using an approach that does not use a table. It is not
always _necessary_ to use table markup even if you have some data that can
be regarded as tabular. But it's surely _possible_ and one logical
alternative quite often inside forms. Some more complicated examples:
http://www.cs.tut.fi/~jkorpela/forms/tables.html

--
Jukka Korpela
TIEKE Tietoyhteiskunnan kehitt