Techniques for Accessible HTML Tables - Recommendations

For the best results when printing this page, set your browser's font size to SMALLEST.

Introduction

The key problem in creating accessible HTML tables is how to associate data cells with their header cells. This page gives a short description and example of the method recommended in a companion paper, Techniques for Accessible HTML Tables. For more information on the background of this recommendation, see that paper.

Recommendation

The basic algorithm for associating data cells with header cells is described in section 11.4.3 of the W3C specification for HTML 4.01. The magic bullet in that algorithm is the fourth step.

If a header cell has the headers attribute set, then the headers referenced by this attribute are inserted into the list and the search stops for the current direction.

The trick, in short, is to mark up all of the TH (header) cells with ID and HEADERS attributes. The HEADERS attribute of a TH cell should point to the other cells that you want to use in conjunction with that cell.

Note that you do not need to add both an ID and a HEADERS attribute to every header cell. You need to add a HEADERS attribute only to header cells that are directly above, or to the left of, data cells. For such cells, it is not necessary to provide an ID attribute.

An Example

The Code

<TABLE CELLSPACING="0" CELLPADDING="5" BORDER="1"  ALIGN="CENTER">
<CAPTION> <h3>Table 2: Ruritanian Ore Production </h3></CAPTION>

<TR>
	<TH ROWSPAN="3" colspan="10" > &nbsp; </th>
	<TH ID="T002-H1-1" COLSPAN="4"> By Weight</TH>
	<TH ID="T002-H1-2" COLSPAN="4"> By Value</TH>
</TR>

<TR>
	<TH ID="T002-H2-1" COLSPAN="2"> Adjusted</TH>
	<TH ID="T002-H2-2" COLSPAN="2"> Unadjusted</TH>
	<TH ID="T002-H2-3" COLSPAN="2"> Adjusted</TH>
	<TH ID="T002-H2-4" COLSPAN="2"> Unadjusted</TH>
</TR>
<TR>
	<TH HEADERS="T002-H1-1 T002-H2-1"> 2001</TH>
	<TH HEADERS="T002-H1-1 T002-H2-1"> 2002</TH>
	<TH HEADERS="T002-H1-1 T002-H2-2"> 2001</TH>
	<TH HEADERS="T002-H1-1 T002-H2-2"> 2002</TH>
	<TH HEADERS="T002-H1-2 T002-H2-3"> 2001</TH>
	<TH HEADERS="T002-H1-2 T002-H2-3"> 2002</TH>
	<TH HEADERS="T002-H1-2 T002-H2-4"> 2001</TH>
	<TH HEADERS="T002-H1-2 T002-H2-4"> 2002</TH>

</TR>

<TR>
<TH align="left"  colspan="10" 
ID="T002-IronR0">Iron Ore</TH>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
</TR>

<TR>
<TD> &nbsp; </TD>
<TH align="left"  colspan="9" 
ID="T002-IronR1" 
HEADERS="T002-IronR0">Refined</TH>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
</TR>

<TR>
<TD> &nbsp; </TD><TD> &nbsp; </TD>
<TH align="left" colspan="8" 
ID="T002-IronR2" 
HEADERS="T002-IronR0">Unrefined</TH>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
</TR>

<TR>
<TD> &nbsp; </TD>
<TD> &nbsp; </TD>
<TD> &nbsp; </TD>
<TH align="left"  colspan="7" 
ID="T002-IronR2-1" 
HEADERS="T002-IronR0 T002-IronR2">Less than 40% pure</TH>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
</TR>

<TR>
<TD> &nbsp; </TD>
<TD> &nbsp; </TD>
<TD> &nbsp; </TD>
<TH align="left"  colspan="7" 
ID="T002-IronR2-2" 
HEADERS="T002-IronR0 T002-IronR2">40% or more pure</TH>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
	<TD>999.99</TD>
</TR>
</TABLE>