参考资料

1. HTML DOM 被按下的键盘键的keycode？
2. HTML DOM禁用和启用下拉列表
3. HTML DOM 返回一个区域的href属性的锚部分实例
4. HTML DOM 获取第一个链接ID的实例
5. HTML DOM对单个单元格的内容垂直对齐
6. HTML DOM 返回加载的文档的服务器域名 实例
7. HTML DOM在下拉列表中选择多个选项
8. HTML DOM删除表格中的行

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;
}