Using the headers Attribute

Contact Us or call 1-877-932-8228
Using the headers Attribute

Using the headers Attribute

  • You can specify any other cell or cells as the heading information for a given data cell.
  • Do not use any of the accessible data table markup on a table used for layout.

The final technique for making tables accessible is the most rigorous and programmatic. HTML 4.0 introduced the headers attribute for table cells. With the headers attribute you can specify any other cell or cells as the heading information for a given (data) cell.

The idea is simple. You attach an id attribute to any cell you want to be a header cell. Then, add the id's of each header cell to the headers attribute of a data cell.

For a simple case, let's say the id's of the column headers are c1, c2, c3, and c4 and the id's of the row headers are r1, r2, r3, and r4. Then the cell at row 3, column 2 would have headers="r3 c2" or the other way around, headers="c2 r3" if that sounded better.

In the "rectangular examples" above, assistive technology can figure out which is the header information. But in a table like the Travel Expense Report that follows, that is nearly impossible. (This table is from the Web Accessibility Initiative, Techniques for Web Content Accessibility Guidelines 1.0. Tables are discussed in Section 5 of that techniques document.)

Table commented out below. Need screenshot.

Here is sample HTML mark up for the data cells of this table using the headers attribute. I have used the convention that c1, c2, c3, ... are the id's of the column headings and r1, r2, r3, ... are the id's of the row headings.

Code Sample:

AccessibleTables/Demos/Code05.xml
<table border="1">
	<caption>Travel Expense Report</caption>
	<tr>
		<td></td>
		<th id="c2">Meals</th>
		<th id="c3">Hotels</th>
		<th id="c4">Transport</th>
		<td id="c5">subtotals</td>
	</tr>
	<tr>
		<th id="r2">San Jose</th>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>
	<tr>
		<td id="r3" >25-Aug-97</td>
	<td headers="c2 r2 r3" bgcolor="#ffff00">37.74</td>
	<td headers="c3 r2 r3">112.00</td>
	<td headers="c4 r2 r3">45.00</td>
	<td></td>
	</tr>
	<tr>
		<td id="r4">26-Aug-97
		<td headers="c2 r2 r4">27.28</td>
		<td headers="c3 r2 r4">112.00</td>
		<td headers="c4 r2 r4">45.00</td>
	...
	<tr>
		<th id="r10">Totals</th>
		<td headers="c2 r10">196.27</td>
		<td headers="c3 r10">442.00</td>
		<td headers="c4 r10">162.00</td>
		<td headers="c5 r10">800.27</td>
	</tr>
</table>

The highlighted cell with the value 37.74, for example, is associated with the date "25-Aug-97" (id="r3"), the city "San Jose," (id="r2") and expense item "Meals" (id="c2"). To make it readable, the subject cell is coded:

<td headers="c2 r2 r3">37.74</td>

Assistive technology might then read this cell "Meals, San Jose, 25-Aug-97, 37.74" or "37.74, Meals, San Jose, 25-Aug-97."

Next