HTML Caption标签

HTML Caption标签(<caption>）是用来为表格（<table>）添加标题的标签。它通常放置在表格的第一个子元素位置，可以帮助用户更好地理解和解释表格内容。一个表格中也可以有多个表格标题。

语法

<table>
  <caption>Table Title</caption>
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1, Col 1</td>
      <td>Row 1, Col 2</td>
      <td>Row 1, Col 3</td>
    </tr>
    <tr>
      <td>Row 2, Col 1</td>
      <td>Row 2, Col 2</td>
      <td>Row 2, Col 3</td>
    </tr>
  </tbody>
</table>

在<table>标签内部添加了一个<caption>标签，用来设置表格的标题。<caption>标签的位置应该在<table>标签的第一个子元素的位置上。

属性

• align: 可以用来设置表格标题水平排列的方式，接受以下值：
  • left: 左对齐（默认）
  • center: 居中对齐
  • right: 右对齐
• valign: 可以用来设置表格标题垂直排列的方式，接受以下值：
  • top: 上对齐
  • middle: 居中对齐（默认）
  • bottom: 底部对齐

注意事项

• <caption>标签只属于<table>标签的第一个子元素，即如果在一张表格中有多个表格标题，只有第一个<caption>标签才会生效，其他的<caption>标签将被忽略。
• 手机浏览器经常将表格标题看作是列表项目的一部分，因此默认情况下不会进行渲染。
• 如果表格的第一个单元格（即左上角的单元格）设定了背景颜色或背景图片，而表格标题没有设置，这样可能会使表格标题的颜色或图片无法与表格的首列相匹配。

示例

以下是一个具有多个表格标题的表格示例：

<table>
  <caption>Table Title</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td>John Doe</td>
      <td>23</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Jane Doe</td>
      <td>20</td>
      <td>Female</td>
    </tr>
  </tbody>

  <caption>Table Note</caption>
  <tfoot>
    <tr>
      <td colspan="3">
        This table is just an example.
      </td>
    </tr>
  </tfoot>
</table>

此示例输出一个表格，其中有两个表格标题：Table Title和Table Note。Table Title在表格的顶部，Table Note在表格底部。