HTML 表格

这一课你将能做到

1. 写出带 caption、thead、tbody、tfoot 的完整语义化表格，知道每个部分的渲染顺序
2. 用 colspan 和 rowspan 实现跨行跨列的复杂表头，不破坏表格结构
3. 用 scope 和 headers 属性建立单元格与表头的关联，让屏幕阅读器正确播报数据

为什么要学

表格是展示结构化数据的最直接方式：财务报表、课程表、对比参数、后台管理系统列表。但很多初学者把表格当成「布局工具」——用 table 做页面排版，导致代码臃肿、移动端崩溃、屏幕阅读器完全读不懂。HTML5 明确禁止表格布局，但数据表格的正确写法依然是后端管理系统、数据展示页的核心技能。

人话：表格就像 Excel 的单元格，有行有列有表头。用对了，数据一目了然；用错了，屏幕阅读器会把「价格」「100 元」读成两个孤立词，视障用户根本不知道 100 元对应什么。

先建立图像

一个完整表格的解剖结构：

┌─────────────────────────────────────┐
│ caption：表格标题（可选但推荐）      │
├─────────────────────────────────────┤
│ thead：表头区域                      │
│   ├─ tr：表头行                     │
│   │   ├─ th：列标题                 │
├─────────────────────────────────────┤
│ tbody：表体区域（可多个）            │
│   ├─ tr：数据行                     │
│   │   ├─ td：数据单元格             │
├─────────────────────────────────────┤
│ tfoot：表尾区域（汇总、合计）        │
│   ├─ tr：汇总行                     │
│   │   ├─ td 或 th                   │
└─────────────────────────────────────┘

关键规则：thead、tbody、tfoot 是可选的，但写了就必须按顺序出现（thead → tbody → tfoot）。tbody 可以有多个，用于分组数据。

跟着做

步骤 1：最小表格

新建 tables.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格演示</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>张三</td>
            <td>85</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>92</td>
        </tr>
    </table>
</body>
</html>

这是「能跑」的表格，但语义不完整：没有表头、没有标题、没有结构分区。改进：

<table border="1">
    <caption>2026 年 10 月考试成绩</caption>
    <tr>
        <th>姓名</th>
        <th>分数</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>85</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>92</td>
    </tr>
</table>

• caption：表格标题，默认显示在表格上方居中。
• th：表头单元格，默认粗体居中。th 替代 td 放在第一行，语义化立现。

步骤 2：完整语义结构

<table border="1">
    <caption>2026 年 Q3 部门预算（单位：万元）</caption>
    <thead>
        <tr>
            <th>部门</th>
            <th>Q1</th>
            <th>Q2</th>
            <th>Q3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>研发部</th>
            <td>50</td>
            <td>60</td>
            <td>70</td>
        </tr>
        <tr>
            <th>市场部</th>
            <td>30</td>
            <td>35</td>
            <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>合计</th>
            <td>80</td>
            <td>95</td>
            <td>110</td>
        </tr>
    </tfoot>
</table>