正在加载...

HTML 表格

当数据有清晰的行与列——课表、成绩表、价格对比、座位图——请使用 HTML table，而不是一堆空格，或用列表拼出的假网格。列表教你沿一条主轴组织集合与序列。表格教你二维数据：每个单元格位于行–列交叉处，并带有你可以命名的标签。若有人问「第二行、Score 列里是什么？」，表格才是诚实的答案。

表格用来做什么

表格在网格上表达关系。读者沿一列向下或沿一行横向快速比较数值。当你用 th 标记表头，而不是把普通 td 文字加粗成“看起来像表头”，辅助技术可以把表头与数据单元格一起朗读。因此表格属于表格化信息——不是像旧式布局教程那样，用嵌套 table 标签去搭整站的横幅、侧栏和页脚。当内容确实是可比较事实的网格时，表格标记才配得上这份复杂度。

直接答案

  • table — 整张表
  • tr — 一行
  • th — 表头单元格（列或行标签）
  • td — 数据单元格
    把表头标签放进 th，好让人和辅助工具看清含义。保持各行单元格数量一致，除非你之后学到 colspan 等高级跨度属性。用表格做数据网格；用 CSS 与语义分区做页面布局。简短的 caption（见第二个演示）为落到网格上的人命名数据集。

简单数据表

先做一行 th 表头，再跟若干行 td 数据。这种形状覆盖许多入门记分板与对比表。

Simple data table

html
HTML Code 
<table>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<td>Ada</td>
<td>98</td>
</tr>
<tr>
<td>Lin</td>
<td>91</td>
</tr>
</table>

阅读简单示例

  • table 包裹整个网格
  • 每个 tr 是一行水平行
  • 第一行用 th 做列标签（「Name」「Score」）
  • 后续行用 td 放普通数值
  • 浏览器默认样式可能淡淡显示边框，也可能没有——边框留到后面的课；结构优先
  • 数每行的单元格：两行数据都是两格，与两个表头对应

Caption 与行标签

caption 为所有人命名表格。当行标题与列标题同样重要时，第一列用 th 可为每行贴标签。caption 要短而具体。

Table with caption and row headers

html
HTML Code 
<table>
<caption>Practice quiz scores</caption>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
<tr>
<th>Ada</th>
<td>98</td>
</tr>
<tr>
<th>Lin</th>
<td>91</td>
</tr>
</table>

阅读 caption 示例

  • 常见入门写法中，caption 应是 table 内的第一个子元素
  • 列表头仍在顶行用 th
  • 第一列的行名也可以是 th，让「Ada」成为标签，而不只是像数字的单元格
  • 其余单元格保持 td 放实际分数
  • 你仍不是在搭页面布局——你是在描述一小份数据集

表格 vs 列表 vs 布局

  • 相关条目或步骤、只有一条主轴 → 列表（上一课的 ul / ol）
  • 在行与列间比较的值 → 表格
  • 整页区域（横幅、分栏、页脚） → 之后用语义结构 + CSS，不要巨型嵌套布局表
    旧式「表格布局」习惯会破坏小屏响应性，也让无障碍更难。若你发现自己嵌套表格只是为了把 logo 放在菜单旁边，停下来，等布局课。要问的是：「我是在网格里比较单元格，还是只想在页面上画框？」

网格的无访问习惯

优先用真正的 th 表头，而不是只在视觉上看起来像表头的加粗 td。清晰的 caption（或附近的标题）在进入网格前说明主题。保持各行单元格数量对齐，好在 Tab 或滑动时列仍诚实。高级属性如 scope 能改善复杂表的表头关联——先扎实学会基础的 th/td 分工，再细化。切勿仅靠颜色标记哪些单元格是标签。

在编辑器中练习

  1. 创建一张 table，第一行有两个表头单元格（th）。
  2. 添加三行数据，td 数量与表头一致。
  3. 在浏览器中查看，确认网格按预期从左到右、从上到下阅读。
  4. 可选：添加 caption，并把第一列变成像第二个示例那样的行标签 th。
  5. 故意弄断一行（少一个单元格），观察奇怪形状，再修好。
  6. 在表格上方或 caption 里写一句，说明数据衡量什么。
  7. 只凭你的表头问同学哪一列是哪一列——若猜错，就改 th 文字。

容易犯的错

  • 用巨型嵌套表格搭整站（遗留布局习惯）
  • 单元格其实是表头时却只用 td
  • 各行单元格数量不一致
  • 本可用简单 ul/ol 更好表达单轴列表时却用表格
  • 表格没有任何人类可读标题（caption 或标题）
  • 把古老的「布局表」片段复制进现代练习页

接在列表之后如何定位

列表组织一维集合。表格组织网格。你很快会样式化边框与间距；本课锁定骨架：带诚实表头的 table、tr、th 与 td。让数据保持表格化，布局放别处，之后的 CSS 会装饰一份已经说得通的结构。

小结

  • 表格使用 table + tr + th / td
  • 用于表格化数据网格，不是现代整页布局
  • 表头标签优先用 th（列，以及有用时的行）
  • caption 帮助命名数据集
  • 保持各行单元格数量一致
  • 没有第二轴的简单集合与步骤，列表仍然更好

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
6
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 1 的 1
Html 教程