caption element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Table of contents

Description

The caption element represents a title or caption for the table it's declared in, and is suposed to provide a very short but accurate description of its content or purpose. A good caption should introduce context for a table, making it significantly easier to understand.

A caption element is usually displayed, by default, on top of the associated table and with center-aligned text. This presentation can be altered using style sheets.

The caption element can only be declared at the begining of the table, before any other element inside it.

When table is the only content of a figure element, caption should be omitted in favor of the figcaption element.

Examples

The following example shows a common use of the caption element. As expected, it describes briefly the contents of the table.

<table class="default">
  <caption>Diameter and distance from the Sun for the inner planets</caption>
  <tr>
    <td></td>
    <th>Mercury</th>
    <th>Venus</th>
    <th>Earth</th>
    <th>Mars</th>
  </tr>
  <tr>
    <th>Diameter (kms)</th>
    <td>4,878</td>
    <td>12,104</td>
    <td>12,756</td>
    <td>6,787</td>
  </tr>
  <tr>
    <th>Distance from the Sun (millions of kms)</th>
    <td>57</td>
    <td>107</td>
    <td>150</td>
    <td>229</td>
  </tr>
</table>
Diameter and distance from the Sun for the inner planets
Mercury Venus Earth Mars
Diameter (kms) 4,878 12,104 12,756 6,787
Distance from the Sun (millions of kms) 57 107 150 229

Note that this table has been formatted usign CSS to improove comprehension and readability. Authors shouldn't expect these results for tables with no presentational properties assigned.

Attributes

Specific attributes

align

A value indicating where the user agent should place the caption in relation with the table. It can take one of four case-insensitive values:

  • top: on top of the table.
  • bottom: under the table.
  • left: at the left side of the table.
  • right: at the right side of the table.

This attribute has become obsolete in HTML5 and its use is no longer valid. Authors are encouraged to use style sheets to provide presentational properties to the elements.

Example

<caption align="bottom"></caption>

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.