Division ID
Skip links
 
 
Print this pageAdd this page to your favoritesSelect a font sizeSmall fontMedium fontLarge font
 

W3C/WCAG Priority 1 Data Tables

In order for a data table to pass W3C/WCAG Priority 1 all cells must have both a row header and a column header. Headers are assigned to cell by using the <th> in stead of the <td> tag.

Once you assign headers to a table you must tell it which headers refer to each cell. This can be done two different ways. The first way is done by adding the scope attribute to all the th tags. This way is the easiest to do but can only be used on simple tables like the one bellow. For all th cells that refer to a column (the top row) add the attribute scope="col", for all the th cell that refer to a row (the left row) add the attribute scope="row", see bellow for an example.

Simple data table

header1 header2 header3
row1 data1 data2
row2 data3 data4

<table width="308" border="1">
  <tr valign="top">
  <th width="100" scope="col">header1</th>
  <th width="100" scope="col">header2</th>
  <th width="100" scope="col">header3</th>
 </tr>
 <tr valign="top">
  <th scope="row">row1</th>
  <td>data1</td>
  <td>data2</td>
 </tr>
 <tr valign="top">
  <th scope="row">row2</th>
  <td>data3</td>
  <td>data4</td>
 </tr>
</table>

The other way to set which headers refer to which cells is by using the id and headers attribute. Since there is a lot more involved in this way it is best to only use it on complex tables, like the one bellow, where you have cell that span multiple columns or rows. The first step is to give every th tag a unique id, this id can not be reused on any table on page. The id is set by adding an id attribute to the th tag, such at id="title". Once you have added unique ids to all the th tags you now must add the headers attribute. This attribute is added to all cells which have a header that refers to them and can include both td and th cells. For cells that refer to multiple headers each header is separated by a space, for example headers="title header1 row1". Please review the example bellow and if you have any questions please let us know.

Simple complex data table

Title
header1 header2 header3
row1 data1 data2
row2 data3 data4

<table width="400" border="1">
 <tr valign="top">
  <th colspan="3" id="title">Title</th>
 </tr>
<tr valign="top">
<th width="100" headers="title" id="header1">header1</th>
<th width="100" headers="title" id="header2">header2</th>
<th width="100" headers="title" id="header3">header3</th>
</tr>
 <tr valign="top">
  <th id="row1" headers="title header1">row1</th>
  <td headers="title row1 header2">data1</td>
  <td headers="title row1 header3">data2</td>
 </tr>
 <tr valign="top">
  <th id="row2" headers="title header1">row2</th>
  <td headers="title row2 header2">data3</td>
  <td headers="title row2 header3">data4</td>
 </tr>
</table>

If you have any questions about creating W3C/WCAG Priority 1 data tables please let us know and we will try and assist you. If you would like to see an example of a more complex data table than the one above please click on the link below

More Complex data table