52. 模块六回顾与测验

知识回顾

模块六学了 9 章表格相关内容。来看看你记住了多少。

第 44 章：表格基础

• <table> 是表格容器
• <tr> 定义行
• <td> 定义数据单元格
• 行列概念：先确定行，再在行里放单元格

第 45 章：表头与标题

• <th> 定义表头单元格，默认加粗居中
• <caption> 是表格标题，放在 <table> 内最前面
• scope 属性告诉屏幕阅读器这是行头还是列头

第 46 章：表格结构

• <thead> 包裹表头行
• <tbody> 包裹数据行
• <tfoot> 包裹汇总行
• 分组后浏览器打印时能重复表头

第 47 章：合并单元格

• colspan 横向合并列
• rowspan 纵向合并行
• 合并后要删掉对应的空单元格

第 48 章：列分组

• <colgroup> 和 <col> 批量设置列样式
• 可以用 span 让一个 <col> 覆盖多列

第 49 章：表格可访问性

• <caption> 给表格加标题
• scope="col" / scope="row" 标注表头方向
• 复杂表格用 id + headers 关联
• 可访问性让屏幕阅读器用户能理解表格

第 50 章：响应式处理

• overflow-x: auto 横向滚动
• @media 查询隐藏次要列
• 卡片化布局：小屏幕改成卡片展示

第 51 章：样式基础

• border-collapse: collapse 合并边框
• padding 控制单元格内边距
• nth-child(even) 做斑马条纹
• tr:hover 做悬停高亮
• border-radius + box-shadow 加圆角阴影

测验

看看这些题你能不能答上来。

1. 下面哪个标签用于定义表头单元格？

A. <td>
B. <th>
C. <thead>
D. <tr>

2. colspan="3" 的效果是？

A. 该单元格纵向合并 3 行
B. 该单元格横向合并 3 列
C. 该单元格宽度为 3px
D. 该表格总共有 3 列

3. border-collapse: collapse 应该写在哪个元素上？

A. <td>
B. <th>
C. <table>
D. <tr>

4. 下面哪个做法不利于表格可访问性？

A. 使用 <caption>
B. 使用 scope 属性
C. 用 <th> 标记表头
D. 只用 <td> 和 CSS 加粗来模拟表头

5. 响应式表格中，overflow-x: auto 的作用是？

A. 超出部分隐藏不显示
B. 超出时出现横向滚动条
C. 自动缩小字体
D. 自动换行

---

答案

1. B：<th> 专门定义表头单元格。
2. B：colspan 是横向合并列。
3. C：border-collapse 写在 <table> 上。
4. D：用 CSS 加粗的 <td> 屏幕阅读器无法识别为表头。
5. B：overflow-x: auto 在内容溢出时显示横向滚动条。

学到这里，你会了什么

一份表格从结构到样式，从桌面到手机，从视觉到可访问性，你应该都能搞定了。

接下来进入模块七：表单。表单是网页收集数据的核心，也是交互性最强的部分。继续加油！