Producing web pages
* HTML CSS DHTML XHTML A to Z of tags        Accessibility          Design

5.2 For data tables that have two or more logical levels, use markup to associate data cells and header cells

When the information in a table is organised in a structural hierarchy with headings and subheadings, it is said to have logical levels. Each heading and subheading corresponds to a logical level. For complex data tables that have two or more logical levels of row or column headers, use markup to associate data cells and header cells.

Use the correct HTML mark-up for building tables. You should:

  • Use <thead>, <tfoot>, and <tbody> to group rows
  • Use <col> and <colgroup> to group columns
  • Use the axis, scope, and headers attributes to describe more complex relationships among data

The <thead>, <tfoot>, and <tbody> divisions allow browsers to scroll through the contents of the table while keeping the header and footer frozen - even though they are not yet supported by all common browsers.

The <thead> and <tfoot> tags contain the <tr> that holds the identifying labels for the table's columns. The <tbody> tag contains the actual rows of data.

For simple tables, you can use the scope attribute as follows:

<tr>
<th scope="col">Date</th>
<th scope="col">Holiday</th>
</tr>
<tr>
    <td>February 14</td>
    <td>Valentine's Day</td>
</tr>