Requirement 9

Use Appropriate Markup in Data Tables so They Are Readable

Identify row and column headers in the page markup. Use markup to associate data cells and header cells for complex tables that have structural divisions beyond those implicit in the rows and columns (if they have two or more logical levels of row or column headers). For in depth use of tables and their attributes, refer to the W3C examples at: http://www.w3.org/TR/1999/REC-html401-19991224/struct/tables.html.
(Reference: W3C: 5.1; 5:2; DOJ, Section 508: g; h)

Examples:

A. Use THEAD, TFOOT, and TBODY to group rows, COL and COLGROUP to group columns, and the ‘AXIS,’ ‘SCOPE’ and ‘HEADER’ attributes to describe more complex relationships among data.

B. Identify row and column headers. The <TD> tag refers to the ‘data cell,’ and the <TH> tag refers to the ‘header cell.’ If the cells contain a heading, substitute <TD> with <TH>.

Preview HTML code in browser

<TABLE width="80%" BORDER="1" CELLSPACING="0"   CELLPADDING="0">
<TR> 
<TH>Name</TH> <TH>Phone Number</TH>
<TH>Age</TH> <TH> Weight</TH>
</TR>
<TR> 
<TD>Steve Nelson</TD> <TD>425/555-2186</TD>
<TD>54</TD> <TD>130 lbs.</TD>
</TR>
<TR> 
<TD>Maria Sanchez</TD> <TD>425/555-8741</TD>
<TD>43</TD> <TD>120 lbs.</TD>
</TR>
</TABLE>

C. How to add ‘AXIS, ‘ID and ‘HEADERS’ attributes to describe complex relationships among data:

Preview HTML code in browser

<TABLE border="1">  <CAPTION>Travel Expense Report</CAPTION>  		  	<TR> <TH> <TH ID="header2" AXIS="expenses">Meals
  	<TH ID="header3" AXIS="expenses">Hotels  	<TH ID="header4" AXIS="expenses">Transport  	<TD>subtotals</TD> <TR> <TH ID="header6"   	AXIS="location">San Jose  	<TH> <TH> <TH> <TD> <TR> <TD ID="header7"   	AXIS="date">25-Aug-97  	<TD headers="header6 header7 header2">37.74  	<TD headers="header6 header7 header3">112.00  	<TD headers="header6 header7 header4">45.00  	<TD>    	<TR> <TD ID="header8" AXIS="date">26-Aug-97  	<TD HEADERS="header6 header8 header2">27.28  	<TD HEADERS="header6 header8 header3">112.00  	<TD HEADERS="header6 header8 header4">45.00   	<TD>  	  	<TR> <TD>subtotals   	<TD>65.02</TD>  	<TD>224.00  	<TD>90.00  	<TD>379.02    	<TR> <TH ID="header10" AXIS="location">Seattle  	<TH> <TH> <TH> <TD>  	<TR> <TD ID="header11" AXIS="date">27-Aug-97  	<TD HEADERS="header10 header11 header2">96.25  	<TD HEADERS="header10 header11 header3">109.00  	<TD HEADERS="header10 header11 header4">36.00  	<TD>  	  	<TR> <TD ID="header12" AXIS="date">28-Aug-97  	<TD HEADERS="header10 header12 header2">35.00  	<TD HEADERS="header10 header12 header3">109.00  	<TD HEADERS="header10 header12 header4">36.00   	<TD>  	  	<TR> <TD>subtotals  	<TD>131.25  	<TD>218.00  	<TD>72.00  	<TD>421.25  	<TR> <TH>Totals  	<TD>196.27  	<TD>442.00  	<TD>162.00  	<TD>800.27  </TABLE>

Read more on how to make tables accessible.