参考资料

1. HTML DOM 返回图像映射的某个区域的hostname实例
2. HTML DOM 节点列表长度
3. HTML DOM 改变一个iframe的src
4. HTML DOM 返回加载的文档的服务器域名 实例
5. HTML DOM 返回和设置链接的hreflang属性实例
6. HTML DOM 哪个鼠标键被点击了？
7. HTML DOM添加表格中的行
8. HTML DOM 节点

HTML DOM 表格标题

详细介绍

HTML DOM (Document Object Model) 表格标题是通过<caption>元素实现的，它为表格提供标题或说明。这个标题通常显示在表格上方，帮助用户理解表格内容。

标签

<caption>标签是HTML中专门用于定义表格标题的元素，必须直接放在<table>开始标签之后。

用法

<table>
  <caption>表格标题文本</caption>
  <tr>
    <th>表头1</th>
    <th>表头2</th>
  </tr>
  <tr>
    <td>数据1</td>
    <td>数据2</td>
  </tr>
</table>

实例

<table border="1">
  <caption>2023年销售数据</caption>
  <tr>
    <th>月份</th>
    <th>销售额</th>
  </tr>
  <tr>
    <td>一月</td>
    <td>$5,000</td>
  </tr>
  <tr>
    <td>二月</td>
    <td>$6,200</td>
  </tr>
</table>

功能

1. 为表格提供可访问的描述性文本

2. 改善表格的可读性和可理解性

3. 帮助屏幕阅读器用户理解表格内容

4. 默认显示在表格上方中央位置

CSS扩展

可以通过CSS自定义表格标题样式：

caption {
  caption-side: top; /* 或 bottom - 控制标题位置 */
  font-size: 1.2em;
  font-weight: bold;
  padding: 10px;
  background-color: #f0f0f0;
  text-align: center;
  margin-bottom: 5px;
}