Skip to: content, navigation

by Ian Lloyd

caption (HTML element)

Spec
Depr. Empty Version
No No HTML 3.2
Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Partial Full Partial Partial
<caption>
</caption>

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>
Type
table element
Contains
inline elements
Contained by
table element only

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, many people instead choose to precede tables with heading elements 1-6 (for example, an h3 element). This makes it easier for people using assistive technology, such as screen readers, to jump from heading to heading in the document, and arguably offers more semantic information than the caption, which doesn’t provide any indication of importance or hierarchy within the document.

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

IE5.5Partial
6.0Partial
7.0Partial
Firefox1.0Full
1.5Full
2.0Full
Safari1.3Partial
2.0Partial
3.0Partial
Opera9.2Partial
9.5Partial

As long as you steer clear of the align attribute, browser support for caption is generally good. It can be problematic to style this element 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

ID:
#1
Date:
Fri, 28 Mar 2008 12:33:54 GMT
Contributed by:
AutisticCuckoo

Captions and headings are different beasts. A heading is a summary of the content that follows (until the next heading on the same, or a superior, level). A caption labels a table, much like the 'Figure' captions used for illustrations in this reference.

In textbooks, table captions are often placed below the table rather than above it, which may explain why may authors don't make the connection with the CAPTION element type.

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters