Table captions

There are many under-used, or under-rated, tags in the HTML specification, but one that is of particular interest to us in tabular display is the caption tag.

This little known element provides the ability to label a table with information that provides a summary for the data that is presented in the table. An example might be "Staff database" in an internal system, or "School results 2013-2014" in a news article.

The caption element provides context to the table in a document, and this post will explore how it can be used and styled in a DataTable, which has full support for captions.

Caption tag specification

The HTML specification defines caption as a flow content element - basically an element that takes up space in the rendered HTML. Furthermore CSS 2.1 defines this element's display property as table-caption, the effect of which is to cause this element to be a block level element. For simplicity it can be considered to be the div that we are all familiar with.

The caption element is optional, but if used it must be the first child of the table tag that it belongs to. Only one caption element can be used per table, but it can contain any other flow elements, with the exception of a table. For example, you can use p or h[1-9] to add extra semantic meaning to the information in the caption. In most cases a simple text string is often good enough - it only to provide context to the table after all!

Visual layout

Where the caption tag is interesting for page layout is how it effects a table when it is included: effectively the caption is internal in the table's block layout. This image from the HTML specification illustrates this visually:

The blur is the table, and would be the extent of the table if there were no caption tag. With the caption, the table's container box effectively expands to include the caption. This is somewhat unusual in CSS layout since the child element (the caption) is drawn visually outside of the container element (the table).

Although the caption is effectively within the table container, it does not automatically get styled by the table for background colour or borders - i.e. a border applied to a table, does not include the caption - additional styling would need to be added for that.

Caption position

The above image immediately beckons the question - can I place the caption on a different side of the table? Yes, but the position can only be changed to below the table. This is done using the CSS caption-side option. It may take the value of top (default) or bottom.

Firefox also has the option of using left and right as the values of caption-side and this renders as would be expected, but IE, Webkit (Safari) and Blink (Chrome, Opera) browsers do not provide this option as it is not part of the CSS specification.

Styling

The caption element can be styled exactly like any other HTML element using CSS. Simply use the selector caption {}, or any derivative thereof. Since it is a block level element you can add borders, background images, text alignment, etc.

The images below shows a number of examples of the caption tag being styled, click the images to enlarge.

Captions and DataTables

DataTables fully supports the caption element and I would encourage it use, where appropriate, to add context to tables.

Internally in DataTables, the most challenging aspect of the caption tag support is when scrolling is enabled (scrollX / scrollY) since DataTables has to split the host table into three sections - the header, body and footer (if present). The caption must therefore be attached to either the header or footer to position it correctly. Additionally, if there is no footer one must be created, otherwise the caption if attached to the body section, would appear at the bottom of the scrollable content.

Example table with a caption

This is a simple example showing a DataTable with a caption attached to it.

Table 1: Fictional list of staff members

Name	Position	Office	Extn.

If you have any interesting examples of how you have used captions with your tables, let us know in the forums!