HTML 表格标题标签 - <caption>

什么是 <caption> 标签？

<caption> 标签用于为HTML表格添加标题或描述。它是表格的第一个子元素，用于解释表格的内容或提供上下文信息。

基本语法

html 
<table>
  <caption>表格标题</caption> <!-- 表格标题 -->
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

父元素与子元素

父元素

<caption> 标签必须作为 <table> 元素的第一个子元素。

子元素

<caption> 标签可以包含各种HTML内容，包括：

  • 文本
  • 链接
  • 简单的格式化元素（如 <strong>、<em> 等）

属性

基本属性

属性 描述
align 规定表格标题的对齐方式（top、bottom、left、right）

已废弃的属性

以下属性在HTML5中已被废弃，建议使用CSS替代：

  • align：使用 caption-side CSS属性

全局属性

<caption> 标签支持所有HTML全局属性，常用的包括：

属性 描述
class 为标题指定类名
id 为标题指定唯一ID
style 内联样式
title 鼠标悬停时显示的提示文本
lang 指定标题内容的语言

示例

基本使用

html 
<table>
  <caption>2025年销售数据</caption>
  <tr>
    <th>月份</th>
    <th>销售额</th>
    <th>利润</th>
  </tr>
  <tr>
    <td>1月</td>
    <td>¥100万</td>
    <td>¥20万</td>
  </tr>
  <tr>
    <td>2月</td>
    <td>¥120万</td>
    <td>¥24万</td>
  </tr>
</table>

使用CSS样式的标题

html 
<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  caption {
    caption-side: bottom;
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
    margin-top: 10px;
    padding: 5px;
  }
</style>

<table>
  <caption>2025年销售数据统计表</caption>
  <tr>
    <th>月份</th>
    <th>销售额</th>
    <th>利润</th>
  </tr>
  <!-- 数据行 -->
</table>

包含格式化内容的标题

html 
<table>
  <caption><strong>重要提示：</strong>以下数据截至2025年12月31日</caption>
  <tr>
    <th>产品名称</th>
    <th>库存数量</th>
  </tr>
  <!-- 数据行 -->
</table>

最佳实践

1. 始终为表格添加标题

为表格添加适当的标题可以提高表格的可读性和可访问性，特别是对于使用屏幕阅读器的用户。

2. 保持标题简洁明了

标题应该简洁地描述表格的内容，避免过长或过于复杂的描述。

3. 使用CSS样式设置标题位置

使用 caption-side CSS属性来控制标题的位置（顶部或底部），而不是使用已废弃的 align 属性。

4. 将标题放在表格顶部或底部

通常，标题应该放在表格的顶部或底部，避免放在左侧或右侧，以保持良好的可读性。

5. 为复杂表格提供详细标题

对于复杂的表格，标题应该提供足够的上下文信息，帮助用户理解表格的结构和内容。

浏览器兼容性

<caption> 标签在所有现代浏览器中都有良好的支持，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • IE6+

总结

<caption> 标签是HTML表格中的重要元素，用于为表格提供标题或描述。通过合理使用 <caption> 标签，可以提高表格的可读性和可访问性。记住要使用CSS进行样式设置，避免使用已废弃的属性，并遵循最佳实践来确保表格的质量和可维护性。

最后更新：2026-02-07