何雨果的知识库

Appearance

HTML 表格 ​

BeginnerHTML Structure

HTML 表格用于展示 结构化的二维数据，如统计报表、时间安排、价格对比等。

一、📊 基本结构 ​

1.1 核心元素 ​

html
<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>Alice</td>
    <td>28</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>32</td>
    <td>上海</td>
  </tr>
</table>
标签全称作用
<table>Table表格容器
<tr>Table Row表格行
<th>Table Header表头单元格（默认加粗居中）
<td>Table Data数据单元格

1.2 渲染效果 ​

姓名年龄城市
Alice28北京
Bob32上海

二、📐 语义化分区 ​

使用 <thead>、<tbody>、<tfoot> 将表格分为三个语义区域：

html
<table>
  <thead>
    <tr>
      <th>商品</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>笔记本</td>
      <td>¥15</td>
      <td>3</td>
      <td>¥45</td>
    </tr>
    <tr>
      <td>钢笔</td>
      <td>¥25</td>
      <td>2</td>
      <td>¥50</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">总计</td>
      <td>¥95</td>
    </tr>
  </tfoot>
</table>
标签作用说明
<thead>表头区域包含列标题，仅出现一次
<tbody>表体区域包含主要数据行，可有多个
<tfoot>表尾区域包含汇总信息，仅出现一次

为什么要用语义化分区

  1. 无障碍：屏幕阅读器能区分表头和数据，正确朗读表格内容
  2. 样式控制：可以分别为 thead/tbody/tfoot 设置不同的 CSS 样式
  3. 打印友好：长表格打印时，浏览器会在每页重复 thead

三、🔀 合并单元格 ​

3.1 列合并（colspan） ​

colspan 让一个单元格 横跨多列：

html
<table>
  <tr>
    <td colspan="3">横跨三列的单元格</td>
  </tr>
  <tr>
    <td>列 1</td>
    <td>列 2</td>
    <td>列 3</td>
  </tr>
</table>

3.2 行合并（rowspan） ​

rowspan 让一个单元格 纵跨多行：

html
<table>
  <tr>
    <td rowspan="2">跨两行</td>
    <td>A</td>
  </tr>
  <tr>
    <td>B</td>
  </tr>
</table>

3.3 合并规则 ​

属性方向值效果
colspan="n"水平 →n 列当前单元格占据 n 列宽度
rowspan="n"垂直 ↓n 行当前单元格占据 n 行高度

注意

使用 colspan 或 rowspan 后，被占据位置的 <td> 需要从代码中 删除，否则表格会错位。例如 colspan="3" 意味着该行只需要写原来列数减 2 个 <td>。

四、♿ 无障碍与语义增强 ​

4.1 caption 标题 ​

为表格添加标题，帮助用户快速理解表格内容：

html
<table>
  <caption>2026 年第一季度销售数据</caption>
  <thead>...</thead>
  <tbody>...</tbody>
</table>

<caption> 必须紧跟在 <table> 标签之后，作为第一个子元素。

4.2 scope 属性 ​

在 <th> 上使用 scope 属性，明确表头与数据的关联方向：

html
<thead>
  <tr>
    <th scope="col">姓名</th>   <!-- 这个表头对应一整列 -->
    <th scope="col">成绩</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">Alice</th>  <!-- 这个表头对应一整行 -->
    <td>95</td>
  </tr>
</tbody>
scope 值含义
col表头关联整列数据
row表头关联整行数据
colgroup表头关联一组列
rowgroup表头关联一组行

五、✅ 最佳实践 ​

规则说明
✅ 用表格展示 数据统计、对比、时间表等结构化数据
❌ 不要用表格做 布局页面布局应使用 CSS（Flexbox / Grid）
✅ 使用 <th> 标记表头而非用加粗的 <td> 模拟
✅ 使用语义化分区<thead> / <tbody> / <tfoot>
✅ 添加 <caption>为表格提供上下文说明

六、📚 参考资源 ​

← 返回 Web 开发研究