Web accessibility service pageWeb accessibility service page

5.2:H105101 For data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

Proper demonstration

Use scope to define the construction and the relationship within the table.

Proper example:

  <TABLE border="1" 
  summary="The table shows the intake of coffee by every parliament politicians, 
  the type of coffee and if sugar was taken with the coffee.">
  <CAPTION>Amount of coffee bought by the politicians</CAPTION>
  <TR>
  <TH scope="col">politician name</TH>
  <TH scope="col">coffee intake (cup)</TH>
  <TH scope="col" abbr="Type">type of coffee</TH>
  <TH scope="col">with or without sugar?</TH>
  </TR>
  <TR>
  <TD>Xiao-Ann Lee</TD>
  <TD>10</TD>
  <TD>mocha</TD>
  <TD>yes</TD>
  </TR>
  <TR>
  <TD>Da-Yi Wu</TD>
  <TD>5</TD>
  <TD>latte</TD>
  <TD>no</TD>
  </TR>
  </TABLE>
          

Use axis, headers and id characters to define the construction and relationship within thetable.

Proper example:

<TABLE border="1" summary="Xiao-Chung Wang and Da-Ming Lee traveling expenses,
The first row represent type of expense, the first column represent the date of expense.
">
<CAPTION>travel expense table</CAPTION>
<TR>
<TH></TH>
<TH id="a2" axis="expense">food expense</TH>
<TH id="a3" axis="expense">living expense</TH>
<TH id="a4" axis="expense">transportation expense</TH>
<TD>subtotal</TD>
</TR>
<TR>
<TH id="a6" axis="name">Xiao-Chung Wang</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a7" axis="date">October 18, 2003</TD>
<TD headers="a6 a7 a2">350</TD>
<TD headers="a6 a7 a3">1200</TD>
<TD headers="a6 a7 a4">240</TD>
<TD></TD>
</TR>
<TR>
<TD id="a8" axis="date">October 19, 2003</TD>
<TD headers="a6 a8 a2">400</TD>
<TD headers="a6 a8 a3">1500</TD>
<TD headers="a6 a8 a4">300</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotal</TD>
<TD>750</TD>
<TD>2700</TD>
<TD>540</TD>
<TD>3990</TD>
</TR>
<TR>
<TH id="a10" axis="name">Da-Ming Lee</TH>
<TH></TH>
<TH></TH>
<TH></TH>
<TD></TD>
</TR>
<TR>
<TD id="a11" axis="date">October 20, 2003</TD>
<TD headers="a10 a11 a2">310</TD>
<TD headers="a10 a11 a3">1350</TD>
<TD headers="a10 a11 a4">320</TD>
<TD></TD>
</TR>
<TR>
<TD id="a12" axis="date">October 21, 2003</TD>
<TD headers="a10 a12 a2">440</TD>
<TD headers="a10 a12 a3">1740</TD>
<TD headers="a10 a12 a4">230</TD>
<TD></TD>
</TR>
<TR>
<TD>subtotal</TD>
<TD>750</TD>
<TD>3090 </TD>
<TD>550</TD>
<TD>4390</TD>
</TR>
<TR>
<TH>total</TH>
<TD>1500</TD>
<TD>5790</TD>
<TD>1090</TD>
<TD>8380</TD>
</TR>
</TABLE>
          
End of Main Content