Table Header Tips

People using screen readers can find it very difficult to understand the information contained within a table.

Tips on how to label table headings to assist visually disabled users.

Cell Headings

Use the TH element to label table heading cells of a row or column. Each TH element cell should also have a unique "id" attribute. The heading cells become reference points for data cells.

For example:

...
<TR>
<TH ID="c1">Name</TH>
<TH ID="c2">Month</TH>
<TH ID="c3">Day</TH>
<TH ID="c4">Year</TH>
</TR>
...

Data Cell Labels

If a table has two or more row or column headings, or headings that span multiple columns, it requires additional labeling to associate the heading with the data.

In the table data cells, the headers attribute is used on the TD element to specify which heading cell is associated with a specific data cell.

Note that the data cell containing the number 02 includes the attribute headers="c2", which relates to the heading cell with id="c2" labelled Month. Therefore, the heading for "02" is Month.

For example:

...
<TR>
<TD HEADERS="c1">Valentines</TD>
<TD HEADERS="c2">02</TD>
<TD HEADERS="c3">14</TD>
<TD HEADERS="c4">1500</TD>
</TR>
...