[DRAFT] Table summary

A summary is a brief description of how data is organized in a table. It may not be necessary in very simple tables but can be important where the data is laid out in an unusual order or the table structure is complex. In these cases, a summary should be provided to give brief orientation clues. In HTML4 the description can be marked up in the summary attribute of the <table> element, but as this is made obsolete in HTML5, the second example on this page shows how to put the description within the <caption> element.

Example 1: Table with data on both sides of a header column

This table has an unusual table structure, the days of the week are in the center column, morning times to the left and afternoon times to the right. It has the summary attribute "Days are shown in the second column, morning opening hours in the first column and afternoon opening hours are in the third column", explaining the way the table is laid out.

Surgery opening times

Morning	Day	Afternoon
Closed	Sunday	14:00 to 15:00
08:00 to 11:30	Mon to Fri	15:00 to 19:00
09:30 to 12:00	Saturday	Closed

Code snippet

Example 2: Table with a complex structure

This is a complex table showing availability of different types and sizes of accommodation in two different locations. The <caption> element is used to describe the table layout as well as act as a heading for the table.

Availability of holiday accommodation
Column one has the location and size of accommodation, other columns show the type and number of properties available

	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 snippet

Note: The technique used for example 2 is valid for both HTML4 and HTML5. @@@Should I also link here to the other HTML5 table description techniques?