Techniques for Accessible HTML Tables - Recommendations

Accessible Tables Home
Stephen Ferg, Bureau of Labor Statistics
Revised: August 23, 2002
For the best results when printing this page, set your browser's font size to SMALLEST.
Creative Commons License
Creative Commons Attribution 3.0 Unported License
The material in the "Accessible HTML Tables" Sourceforge project is licensed under the Creative Commons "attribution" license. You are free to translate it and post your translation on your own web site subject to the following conditions. (1) You acknowledge the original work and the original author. (2) You do not suggest that the original author endorses your translation. (3) You do not request that a link to your translation be added to this site.

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

Table 2: Ruritanian Ore Production

  By Weight By Value
Adjusted Unadjusted Adjusted Unadjusted
2001 2002 2001 2002 2001 2002 2001 2002
Iron Ore 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99
  Refined 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99
    Unrefined 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99
      Less than 40% pure 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99
      40% or more pure 999.99 999.99 999.99 999.99 999.99 999.99 999.99 999.99

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>