Minz. Out of the box

Data tables part 2

18/12/2003

Last time, I talked about header/cell association using the scope attribute.

Well, HTML offers another mechanism. While the scope method works only for one level at a time (remember, col/colgroup applies to a single column/columngroup and row/rowgroup to a single row/rowgroup), the id/headers method can be used to manage some more complex headers.

Id and headers

It is way easy to do this, but it's a load of work you'd have to do as you will see in the example.

  1. Just add a unique id to each header cell (using <th id="foo">)
  2. Add the headers attribute (using <td headers="foo">) to each data cell and list every header id that actually applies to this cell. If there is more than on, seperate them by spaces and start with the topmost.

Examples

There is only one example this time, because the task is not so complicated than the last one.
But in addition, I have varied example 3 of Data tables part 1, to show and explain the usage of scope="rowgroup". If you are interested in seeing it, follow the link to example #2.

Please note that the examples are styled using attribute and adjacent-sibling selectors. So to view them correctly, be sure to use a User Agent which understands this syntax (Mozilla/Gecko recommended)

  1. Table with id-headers association. Example 1
  2. Variation of Data Tables part1 example 3, showing the usage of rowgroup. Example 2

In depth

Some further reading about data tables and table markup:

  1. Joe Clarke's Building Accessible Websites Chapter 10: Tables and Frames
  2. HTML 4.01 Specifications Chapter 11: Tables
  3. WCAG HTML Techniques for Data Tables

Comments

Anne:

Now we're talking 'about markup! Looks really cool. Tables are probably the most advanced HTML elements ever, especially when it comes to meta data :-)

Posted: 01/02/2004

Minz:

Anne, you tell me....:))

If you have got a basic grasp about the axis attribute, please let me know!!!

Posted: 01/03/2004