# Using `caption` elements to associate data table captions with data tables

ID: H39

Technology: html

Type: Technique

## When to Use

HTML data tables

## Description

The objective of this technique is to programmatically associate captions for data tables where captions are provided in the presentation. The `caption` for a `table` is a table identifier and acts like a title or heading for the table.

The `caption` element is the appropriate markup for such text and it ensures that the table identifier remains associated with the table, including visually (by default). In addition, using the `caption` element allows screen reading software to navigate directly to the caption for a table if one is present.

Although WCAG 2 does not prohibit the use of layout tables, CSS-based layouts are recommended in order to retain the defined semantic meaning of the HTML `table` elements and to conform to the coding practice of separating presentation from content. If a table is used for layout, the `caption` element is not used. The purpose of a layout table is simply to control the placement of content; the table itself is "transparent" to the user. A `caption` would "break" this transparency by calling attention to the table. See F46 for details.

## Examples

### An appointment calendar with a `caption`

    <table>
      <caption>Schedule for the week of March 6</caption>
      ...
    </table>

## Tests

### Procedure

For each data table:

1. Check that the table includes a `caption` element.
2. Check that the text that titles or describes the table is included in the `caption` element.

### Expected Results

- #1 and #2 are true.

## Related Techniques

- H51
- F46

## Resources

- HTML - the `caption` element.