课时12：表格基础¶
学习目标：掌握 HTML 表格的核心标签、单元格合并技术及不规则表格的构建方法。
一、表格基础标签体系¶
HTML 表格由三个核心标签构建，形成严格的层级嵌套关系：
| 标签 | 全称 | 语义 | 标签类型 |
|---|---|---|---|
<table> |
Table | 表格容器 | 双标签、容器级 |
<tr> |
Table Row | 表格行 | 双标签、容器级 |
<td> |
Table Data | 标准单元格 | 双标签、容器级 |
<th> |
Table Header | 表头单元格 | 双标签、容器级 |
二、基础表格构建¶
2.1 三行四列表格示例¶
<table>
<tr>
<td>数据1</td>
<td>数据2</td>
<td>数据3</td>
<td>数据4</td>
</tr>
<tr>
<td>数据5</td>
<td>数据6</td>
<td>数据7</td>
<td>数据8</td>
</tr>
<tr>
<td>数据9</td>
<td>数据10</td>
<td>数据11</td>
<td>数据12</td>
</tr>
</table>
2.2 默认样式问题¶
表格默认无可见边框，需要添加样式才能呈现网格效果：
边框合并优化：
border-collapse: collapse将相邻单元格边框合并为单一线条，使表格更美观- 属于 CSS 属性，实际工作中推荐将样式写入外部 CSS 文件
三、表头标签 <th>¶
3.1 语义与样式¶
<th> 用于定义表格的表头单元格，通常位于第一行或第一列：
<table border="1">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
</tr>
</table>
浏览器默认效果：
- <th> 中的文本自动加粗显示
- 文本默认居中对齐（部分浏览器实现）
- 视觉区别于普通数据单元格 <td>
3.2 使用规范¶
- 第一行通常使用
<th>描述列的含义 - 第一列（如行标题）也可使用
<th> - 一个表格中
<th>和<td>可以共存
四、单元格合并技术¶
4.1 合并属性¶
| 属性 | 作用 | 方向 | 属性值 |
|---|---|---|---|
rowspan |
跨行合并 | 纵向（上下） | 数字，表示跨越的行数 |
colspan |
跨列合并 | 横向（左右） | 数字，表示跨越的列数 |
4.2 合并核心原则¶
被合并占位的位置在后续行中不再书写对应的 <td> 标签。
4.3 合并案例分析¶
目标表格结构：
┌─────┬─────┬─────┬─────┐
│ 1 │ 2 │ 3 │ 4 │
│ │ │ │ │
├─────┴─────┤ │ │
│ 5 │ 6 │ │ │ <- 第3格跨3行
├─────┼─────┤ │ │
│ 7 │ 8 │ │ │
└─────┴─────┴─────┴─────┘
实现代码：
<table border="1" style="border-collapse: collapse;">
<tr>
<td>1</td>
<td colspan="2">2</td> <!-- 跨2列，占位第2、3格 -->
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<!-- 注意：第3格被上一行 rowspan 占用，此处不写 td -->
<td>7</td>
</tr>
</table>
4.4 合并分析步骤¶
- 确定总行数：数出
<tr>的数量 - 确定最大列数：分析每行未被合并占位的
<td>/<th>数量总和 - 逐行观察：识别哪些单元格进行了跨行或跨列，并设置对应属性
- 扣除占位：被合并的位置在后续行中省略不写
4.5 样式辅助观察¶
为便于调试和观察合并效果，可为单元格添加临时样式：