More complex data table

This is an example of a complex data table that passes W3C/WCAG Priority 1. It was placed on a second page since you are not able to reuse id names and we wanted to make the html as easy to read as possible. If you would like some instructions on how to make data table that pass W3C/WCAG Priority 1 please click on the back button bellow.

<table width="428" border="1">
 <tr valign="top">
  <th colspan="4" id="title">Title</th>
 </tr>
 <tr valign="top">
  <th id="header1" headers="title">Header1</th>
  <th id="header2" headers="title">Header2</th>
  <th id="header3" colspan="2" headers="title">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>
  <td headers="title row1 header3">data3</td>
 </tr>
 <tr valign="top">
  <th id="row2" headers="title header1">Row2</th>
  <td headers="title row2 header2">data4</td>
  <td headers="title row2 header3">data5</td>
  <td headers="title row2 header3">data6</td>
 </tr>
 <tr valign="top">
  <th colspan="4" id="title2">Second level Title </th>
 </tr>
 <tr valign="top">
  <th width="100" id="header4" headers="title2">Header4</th>
  <th width="100" id="header5" headers="title2">Header5</th>
  <th width="100" id="header6" headers="title2">Header6</th>
  <th width="100" id="header7" headers="title2">Header7</th>
 </tr>
 <tr valign="top">
  <th id="row3" headers="title2 header4">Row3</th>
  <td headers="title2 row3 header5">data7</td>
  <td headers="title2 row3 header6">data8</td>
  <td headers="title2 row3 header7">data9</td>
 </tr>
 <tr valign="top">
  <th id="row4" headers="title2 header4">Row4</th>
  <td headers="title2 row4 header4">data10</td>
  <td headers="title2 row4 header4">data11</td>
  <td headers="title2 row4 header4">data12</td>
 </tr>
</table>

Back