| Depr. | Empty | Version |
|---|---|---|
| No | No | HTML 3.2 |
| IE5.5+ | FF1+ | SA1.3+ | OP9.2+ | CH2+ |
|---|---|---|---|---|
| Full | Full | Full | Full | Full |
Syntax
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
- align
defines the alignment or position of the table’s caption element, relative to the table
