Tables in HTML (page 2)

Header cells

Two types of cells can be defined in an HTML table. One of them is the simple cell (HTML td element), already defined in the "simple table" example, and the other one is a special type of cell (HTML th element) that contains header information for a set of specified cells.

Browsers may render the content of header cells in a special way (usually as centered bold text), attributes that can be visually achieved by using a normal cell (HTML td element) with presentational attributes (centered bold text). But header cells provide more information that may be helpful for non-visual browsers (spoken browsers may speak to the user the cells content while immediately associating it to the header cell) and spiders (like search engines spiders).

The "scope" attribute

The cells affected by a header cell can be defined in different ways, but the most common and simple is to use the scope attribute. Set in both, the HTML td tag and the HTML th tag, this attribute can take four values: "row" and "col" affecting the containing row or column respectively, and "rowgroup" and "colgroup" affecting the containing group of rows or columns (described further in this tutorial).

In the example below the same "simple table" is defined but this time with header cells using the "scope" attribute:

As we can deduct from the previous paragraph, in this example, the column 1 gives header information for the cells 1 and 4, the column 2 for the cells 2 and 5 and the column 3 for the cells 3 and 6.

Note that, as this attribute can also be defined in normal cells (HTML td tag), normal cells can act as header cells too. This is the case when a cell provides both, header information and data. In any other case header cells should be used (HTML th tag).

The "headers" attribute

Another way to associate header cells to normal cells is using the attribute "headers". This attribute is defined in a normal cell (HTML td tag) and refers to a set of cells (using their "id" attributes, separated by spaces) that provide header information for it.

There is a low (and very rare) number of cases where this attribute can't be replaced with the "scope" attribute. The next example shows an overlaid table, where there's an oblique line of cells that goes from the top left corner to the bottom right corner and serves as limit to define which cells receive the top and right headers and which the left and bottom.

The information in this table isn't fully visual, but semantically it provides a wel defined set of headers for each cell. For example, the cell "C1" (in the oblique axis) with four headings (H1, H4, H7 and H10), and the cell T1 (on top of the axis) with two (H2 and H7).

This type of table is one of the few uses where "scope" (the simple way) wouldn't work, and is mostly used for showing scientific data.

The "axis" attribute

This attribute can be defined for header cells as well as for normal cells, and group headers and data by categories, in which the cells can be clasified. Although its use is a little complex, it gives new and expanded ways to provide header information, specially in the case of spoken browsers for blind people.

The following example illustrates the use of "axis" as a way to make the data more readable and understandable.

This example sets two type of axes or categories: a region category (Europe and America) and an income/outcome category. In a spoken web browser this non-visual information makes a lot of sense and helps undestanding the difficult table sctructure a lot better.