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.

Table with data on both sides of a header column Link to this section of the page

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.

<table
	summary="Days are shown in the second column, morning opening hours in the first column and afternoon opening hours are in the third column">

Table with a complex structure Link to this section of the page

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.

<caption>Availability of holiday accommodation <br>
	<span>Column one has the location and size of accommodation, other columns show the type and number of properties available</span>
</caption>

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?

Related WCAG2.0 Technique Link to this section of the page

The following WCAG 2.0 technique was used in the example above:

• H73: Using the summary attribute of the table element