码农教程 - 一技在手,衣食无忧! tools

HTML <caption> Tag

❮ Previous Complete HTML Reference Next ❯

Example

A table with a caption:

<table>
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <caption> tag defines a table caption.

The <caption> tag must be inserted immediately after the <table> tag.

Tip: By default, a table caption will be center-aligned above a table. However, the CSS properties text-align and caption-side can be used to align and place the caption.

Browser Support

Element
<caption> Yes Yes Yes Yes Yes

Global Attributes

The <caption> tag also supports the Global Attributes in HTML.

Event Attributes

The <caption> tag also supports the Event Attributes in HTML.

More Examples

Example

Position table captions (with CSS):

<table>
  <caption style="text-align:right">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
<br>

<table>
  <caption style="caption-side:bottom">My savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>
Try it Yourself »

Related Pages

HTML DOM reference: Caption Object

Default CSS Settings

Most browsers will display the <caption> element with the following default values:

Example

caption {
  display: table-caption;
  text-align: center;
}
Try it Yourself »

❮ Previous Complete HTML Reference Next ❯