<caption>: The Table Caption element

<caption> HTML 元素指定表格的标题（或标题），为表格提供 accessible description。

¥The <caption> HTML element specifies the caption (or title) of a table, providing the table an accessible description.

Try it

属性

¥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

指定标题应显示在表格的哪一侧。可能的 enumerated 值为 left、top、right 或 bottom。请改用 caption-side 和 text-align CSS 属性，因为此属性已弃用。

使用说明

¥Usage notes

  • 如果包含，则 <caption> 元素必须是其父 <table> 元素的第一个子元素。
  • 当 <table> 嵌套在 <figure> 中作为图形的唯一内容时，应通过 <figcaption> 为 <figure> 添加标题，而不是作为 <caption> 嵌套在 <table> 中。
  • 应用于表格的任何 background-color 将不会应用于其标题。如果你希望两者后面有相同的颜色，请将 background-color 添加到 <caption> 元素。

示例

¥Example

请参阅 <table> 了解介绍通用标准和最佳实践的完整表格示例。

¥See <table> for a complete table example introducing common standards and best practices.

此示例演示了一个基本表格，其中包含描述所显示数据的标题。

¥This example demonstrates a basic table that includes a caption describing the data presented.

这样的 "title" 对于快速扫描页面的用户很有帮助，对于视力受损的用户尤其有利，使他们能够快速确定表格的相关性，而无需让屏幕阅读器读取许多单元格的内容只是为了找出答案 该表是关于什么的。

¥Such a "title" is helpful for users who are quickly scanning the page, and it is especially beneficial for visually impaired users, allowing them to determine the table's relevance quickly without the need to have a screen reader read the contents of many cells just to find out what the table is about.

HTML

<caption> 元素用作 <table> 的第一个子元素，其文本内容类似于标题来描述表数据。三行（第一行是标题行）和两列是使用 <caption> 之后的 <tr>、<th> 和 <td> 元素创建的。

¥A <caption> element is used as the first child of the <table>, with text content similar to a title to describe the table data. Three rows, the first being a header row, with two columns are created using the <tr>, <th> and <td> elements after the <caption>.

html

<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>登录</th>
    <th>电子邮件</th>
  </tr> 
  <tr>
    <td>user1</td>
    <td>[user1@example.com](mailto:user1@example.com)</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>[user2@example.com](mailto:user2@example.com)</td>
  </tr>
</table>

CSS

使用一些基本的 CSS 来对齐和高亮 <caption>。

¥Some basic CSS is used to align and highlight the <caption>.

css
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}
css
table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

th {
  background-color: rgb(230 230 230);
}

td {
  text-align: center;
}

结果

¥Result

技术总结

¥Technical summary

内容类别 没有任何。
允许的内容 流量内容.
标签遗漏 如果元素后面没有紧跟 ASCII 空格或注释，则可以省略结束标记。
允许的父级 <table> 元素，作为其第一个后代。
隐式 ARIA 角色 caption
允许的 ARIA 角色 不允许 role
DOM 接口 HTMLTableCaptionElement

规范

Specification
HTML Standard
# the-caption-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also