参考资料

  1. HTML DOM 提交表单
  2. HTML DOM 用指定的ID弹出一个元素的innerHTML实例
  3. HTML DOM 节点列表
  4. HTML DOM 给image加上border
  5. HTML DOM 返回一个区域的href属性的querystring部分 实例
  6. HTML DOM获得下拉列表的选项数量
  7. HTML DOM弹出下拉列表中所有选项
  8. HTML DOM 返回一个button的value 实例

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