<caption>: The Table Caption element - HTML: HyperText Markup Language 编辑

The HTML <caption> element specifies the caption (or title) of a table.

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

Attributes

This element includes the global attributes.

Deprecated attributes

The following attributes are deprecated and should not be used. They are documented below for reference when updating existing code and for historical interest only.

align

This enumerated attribute indicates how the caption must be aligned with respect to the table. It may have one of the following values:

left

The caption is displayed to the left of the table.

top

The caption is displayed above the table.

right

The caption is displayed to the right of the table.

bottom

The caption is displayed below the table.

Usage note: Do not use this attribute, as it has been deprecated. The <caption> element should be styled using the CSS properties caption-side and text-align.

Usage notes

The <caption> element should be the first child of its parent <table> element.

When the <table> element that contains the <caption> is the only descendant of a <figure> element, you should use the <figcaption> element instead of <caption>.

Example

This simple example presents a table that includes a caption.

<table>
  <caption>Example Caption</caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>user1@sample.com</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>user2@sample.com</td>
  </tr>
</table>

caption {
  caption-side: top;
  align: right;
}
table {
  border-collapse: collapse;
  border-spacing: 0px;
}
table, th, td {
  border: 1px solid black;
}

table {background: red;} do not alter caption. For that you need display: block.

Specifications

Browser compatibility

BCD tables only load in the browser

See also

• CSS properties that may be specially useful to style the <caption> element:
  • text-align, caption-side.