caption (HTML element)

Spec
Depr. Empty Version
No No HTML 3.2
Browser support (more…)
IE5.5+ FF1+ SA1.3+ OP9.2+ CH2+
Full Full Full Full Full

Syntax

<caption>
</caption>

Description

The caption element provides a means for labeling the following table’s content in a visual manner (unlike the table’s summary attribute, which is non-visible). It has one element-specific attribute, align, which is very rudimentary and not entirely supported (it’s also deprecated, so it should generally be avoided).

The caption element can only be used once per table and must immediately follow the table start tag.

While the caption element seems like the most appropriate markup for labeling a table, and indeed its intention is to label a data table in much the same way that you might provide a caption for a picture in a book. However, in most printed media, captions for illustrations, images and tables usually occur after the item, whereas the caption element comes before the table. A combination of poor styling options for caption with CSS and poor alignment support has led many people instead choose to precede tables with heading elements 1-6 (for example, an h3 element). This makes it easier for some people using assistive technology, such as screen readers, to jump from heading to heading in the document (there are ways to navigate by heading and also to bring up a list of headings on a page). However, it should be noted that a heading is really intended to indicate the content of the whole section following the heading, right up to wherever the next heading is, rather than one discrete part of the page, as the caption is. The caption element is the correct markup to identify a table, then, but don’t be surprised if you see people using headings instead.

Example

Here’s a table caption that provides a visual summary and heading all in one:

<table border="1">
  <caption>Interest Rates for Young Saver Accounts</caption>
  <tr>
    <th>Account Type</th>
    <th>Interest Rate</th>
  </tr>
  <tr>
    <td>Smart</td>
    <td>From 2%</td>
  </tr>
  <tr>
    <td>Young Saver</td>
    <td>From 1.6%</td>
  </tr>
</table>

Use This For …

This element should be used for providing a short heading for the table; it should not be used to provide a description of the table’s structure, as you might do with the table summary attribute.

Compatibility

Internet Explorer Firefox Safari Opera Chrome
5.5 6.0 7.0 8.0 1.0 1.5 2.0 3.0 3.5 1.3 2.0 3.1 4.0 9.2 9.5 10.0 2.0
Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full Full

All browser render the caption element. However, its align attribute is poorly supported and this element is equally problematic to style consistently cross-browser with CSS, though, unlike headings 1-6, which is another reason why the caption element isn’t used very frequently.

In this Section

User-contributed notes

There are no comments yet.

Related Products