Minz. Out of the box

Data tables part 1

20/11/2003

Marking up data tables correctly sometimes seems to be rocket science. Marking them up accessible even more. I had a long fight with data tables to get a basic grasp about them. What bothered me most, was the lack of examples. So I dared to put this one up. It is just quick and dirty example, so feel free to correct me or suggest alternative solutions.

Using the scope attribute

The scope attribute is really the simplest way to associate table data with table headers.

Scopes can be used horizontal (rows) or vertical (cols). So if you marked up a column header which refers to all data in this colum you'd use scope="cols". You can mix up horizontal and vertical scopes in a table if appropriate as well as use scope on grouped elements like colgroup.

Headers (elements)

Actually, there are two levels of table headers. The th element is called first-level header. Usually, these elements sit on top of your table, being the first row. But you can and should use the th everywhere in the table, if this cell acts as a header for the rows below and not above.

The second-level headers are known as thead. thead was original invented for presentational purposes. The table header should remain the same while you are skimming through loads of table data. But this is not supported by any browser. Nonehteless it is a fine way to group elements and divide your table into a header section and in body sections, using tbody.

Please don't mix these with the headers attribute, which will be discussed in Data tables part 2.

Examples

Anyway, I read a lot of this table stuff and never got it. So I have put up some testfiles, to see this all in action.

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 vertical and horizontal scope. Example 1
  2. Same table with thead and a couple of tbody sections. Example 2
  3. Nearly the same table, using sections scope and colgroup. Example 3

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