<caption>：表格标题元素

基线 广泛可用

此功能已完善，可在许多设备和浏览器版本上运行。它自以下时间起在浏览器中可用 2015 年 7 月.

<caption> HTML 元素指定表格的标题（或名称），为表格提供 可访问的描述。

试试看

属性

此元素包括 全局属性。

已弃用的属性

以下属性已弃用，不应使用。在更新现有代码和出于历史兴趣时，将在下面记录这些属性以供参考。

align

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

使用说明

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

示例

有关完整的表格示例，介绍常见标准和最佳实践，请参阅<table>。

带标题的表格

此示例演示了一个包含描述所呈现数据的标题的基本表格。

这样的“标题”对于快速扫描页面内容的用户很有帮助，对于视障用户尤其有益，使他们能够快速确定表格的相关性，而无需屏幕阅读器读取许多单元格的内容才能了解表格的主题。

HTML

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

html
<table>
  <caption>
    User login email addresses
  </caption>
  <tr>
    <th>Login</th>
    <th>Email</th>
  </tr>
  <tr>
    <td>user1</td>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>user2</td>
    <td>[email protected]</td>
  </tr>
</table>

CSS

一些基本的 CSS 用于对齐和突出显示<caption>。

css
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 10px;
  font-weight: bold;
}

结果

技术摘要

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

规范

规范
HTML 标准
# the-caption-element

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅