[DRAFT] Multi-level tables

Multi-level tables are those that have a structure that is too complex to support strict horizontal or vertical association between header and data cells. In each case, the relationship between header and data cells needs to be defined by giving each <th> cell a unique id attribute, and each <td> a headers attribute that lists related id values, without any comma separation. Table structures that need to be marked up this way include:

• Where column headers are repeated or changed part-way through the table;
• Those with three or more header cells related to each data cell;
• Where some of the header cells aren't in direct horizontal or vertical alignment to related data cells.

Example 1: Table with multiple column headers in each column

This table shows contact details for six suppliers. To avoid producing an overly wide table the first row has <th> cells identifying the first three supply firms and the fourth row has the <th> cells identifying the other three. To ensure that data cells are associated with the correct firm, each <th> cell has a unique id and each <td> cell has a headers attribute listing the id values that relate to it.

Supplier contacts

	Example1 Ltd	Example2 Co	Example 3 Inc
Contact	James Phillips	Marie Beauchamp	Andrew Bruce
Position	Sales Director	Sales Manager	Client Support Officer
Email	jp@example1.co.uk	marie@example2.co.fr	sales@example3.com
	Example 4 Ltd	Example 5Inc	Example 6 Co
Contact	Suzette Jones	Alex Howe	Axel Gaunt
Position	Sales Officer	Sales Director	Proprietor
Email	Suz@example4.co.uk	howe@example5.com	sales@example6.co.eu

Code snippets

Assigning id attributes to <th> cells:

Assigning header attributes to <td> cells:

Full code for Example 1: Table with multiple column headers in each column

Example 2: Table with three headers related to each data cell

This example shows availability of accommodation of a given type and size in two different locations. For the data to be understood, each <td> cell needs to be associated to three <td> cells (location, size and type of accommodation). To define these complex associations, each <th> cell has a unique id attribute and all data cells have a headers attribute listing the related cell id values.

Availability of holiday accommodation

	Studio	Apt	Chalet	Villa
Paris
1 bedroom	11	20	25	23
2 bedroom	-	43	52	32
3 bedroom	-	13	15	40
Rome
1 bedroom	13	21	22	3
2 bedroom	-	23	43	30
3 bedroom	-	16	32	40

Code snippets

Assigning id attributes to <th> cells:

Assigning header attributes to <td> cells:

Full code for Example 2: Table with three headers related to each data cell