正在加载...

HTML 表格表头

学完表格尺寸后，本课关注标签含义：用 th、可选 scope 与 caption。外观仍用 CSS。

为什么表头不只是加粗的 td

辅助技术需要真正的 th。加粗 td 看起来像表头，却没有表头语义。

直接答案

用 th 写标签。需要时用 scope，并用 <caption> 作为表题。数据留在 td。

带 caption 的列表头

顶行用 th scope="col"，再加 caption。

Column headers and caption

html
HTML Code 
<table>
<caption>Weekly inventory</caption>
<tr>
<th scope="col">Item</th>
<th scope="col">Qty</th>
<th scope="col">Aisle</th>
</tr>
<tr>
<td>Notebook</td>
<td>12</td>
<td>B2</td>
</tr>
<tr>
<td>USB cable</td>
<td>7</td>
<td>A1</td>
</tr>
</table>

阅读列表头示例

  • caption 在 table 内
  • 顶部 th 带 scope=col
  • 数量在 td

命名记录的行表头

行名用 th scope="row"，可与列表头组合。

Row headers with a header row

html
HTML Code 
<table>
<caption>Team scores</caption>
<tr>
<th scope="col">Name</th>
<th scope="col">Points</th>
<th scope="col">Level</th>
</tr>
<tr>
<th scope="row">Ada</th>
<td>98</td>
<td>A</td>
</tr>
<tr>
<th scope="row">Lin</th>
<td>91</td>
<td>B</td>
</tr>
</table>

阅读行表头示例

  • 顶部 scope=col
  • Ada/Lin 为 scope=row
  • 分数在 td

scope 对照表

不确定时查阅取值。

📊 scope attribute values

Value Typical use Example cell
col Header labels a column Top “Qty” label
row Header labels a row Side “Ada” name
colgroup Header for a group of columns Advanced multi-header grids
rowgroup Header for a group of rows Advanced sectioned tables

本课程先掌握 col 与 row。

练习

  1. 三列表格（社团）
  2. 加 caption
  3. 顶部 th scope=col
  4. 姓名 th scope=row
  5. 临时改回 td 并对比

易错点

  • 只用加粗 td
  • caption 写在 table 外
  • 混合网格忘记 scope
  • 所有单元格都写成 th

小结

  • th 才是真正表头
  • scope 关联列或行
  • caption 为整表标题
  • 数据放在 td

🧠 测试您的知识

准备开始

测试您的知识

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

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

📝 说明

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