学习前提

掌握 HTML 嵌套和列表；准备一组按行列比较的数据。

本课完成后你能做什么

建立带标题、行表头和列表头的数据表，判断什么时候应使用表格而不是卡片。

先理解机制

表格的价值不是画出边框，而是让单元格同时受到行和列的解释。例如课程名称、课时和难度按行排列时，一个“4”只有结合列标题才知道是四节课。caption 描述整张表；th 表示表头，td 表示普通数据。thead 和 tbody 表达分组，却不能替代明确的表头关联。

简单表格中，scope="col" 表示列表头，scope="row" 表示行表头。合并单元格会增加关联复杂度，应在信息确实需要时才使用 rowspan 或 colspan。两列表格通常比一个巨大的复杂表更易读；把复杂数据拆成多个带标题的表格，常比不断合并表头更清晰。

可运行示例

<table>
  <caption>Weekly learning plan</caption>
  <thead><tr><th scope="col">Topic</th><th scope="col">Sessions</th></tr></thead>
  <tbody>
    <tr><th scope="row">HTML</th><td>3</td></tr>
    <tr><th scope="row">CSS</th><td>4</td></tr>
  </tbody>
</table>

推演与验证

在 body 中运行示例，观察未加 CSS 时仍能辨认数据结构。检查每行的单元格数量是否一致。再添加“练习目标”一列，要求每个课程都有对应数据。用开发者工具查看 table 的可访问名称是否来自 caption，而不是只在外面放一个没有关联的段落。

常见错误与边界

不要使用表格给整页做左右布局；布局应交给 CSS。不要把所有单元格都写成 td，再只靠加粗伪装表头。窄屏放不下时可以让表格所在容器独立横向滚动，但不要把整个页面撑出屏幕。

动手练习

为三门课程添加“章节数”和“完成状态”两列。说明为什么完成状态不能只用绿色和红色圆点表示。

参考解法与理由

状态应包含可读文字，例如 Completed 或 In progress；颜色只是辅助提示。课程名保留行为表头，新增字段是列表头。这样用户能够明确地读出“CSS 的完成状态是进行中”，而无需根据颜色猜测含义。

进一步阅读