8.1 水平合并单元格
在表格中合并单元格可以让你创建更灵活和更有信息量的数据展示。 这在你需要合并几个单元格来创建标题或者汇总数据时尤其有用。 在 HTML 中，可以使用 colspan 和 rowspan 属性来合并单元格。
属性 colspan
属性 colspan 用于水平合并单元格。它指定一个单元格应该跨越的列数。 例如，如果你有一个 colspan="2" 的单元格，它会占据一行中两个普通单元格的位置。
使用示例：
假设你有一个三列的表格，你希望第一行的第一个单元格占据两列。 你可以使用 colspan="2" 来合并这两个单元格。这在创建跨多列的标题或者结合属于多个分类的数据时非常有用。
<table border="1">
<tr>
<th>名字</th>
<th>年龄</th>
<th>城市</th>
</tr>
<tr>
<td>Alice</td>
<td>25</td>
<td>伦敦</td>
</tr>
<tr>
<td colspan="2">总计</td>
<td>2 条记录</td>
</tr>
</table>
8.2 垂直合并单元格
属性 rowspan 用于垂直合并单元格。它指定一个单元格应该跨越的行数。 例如，如果你有一个 rowspan="2" 的单元格，它会占据一列中两个普通单元格的位置。
使用示例：
假设你有一个三行的表格，你希望第一列的第一个单元格占据两行。 你可以使用 rowspan="2" 来合并这两个单元格。这在创建一个数据分类跨多行的表格时非常有用，例如合并的标题或汇总数据。
<table border="1">
<tr>
<th>名字</th>
<th>项目</th>
<th>城市</th>
</tr>
<tr>
<td rowspan="2">Alice</td>
<td>项目 A</td>
<td>伦敦</td>
</tr>
<tr>
<!-- 这里是占位符 -->
<td>项目 B</td>
<td>巴统</td>
</tr>
</table>
8.3 工作原理说明
colspan 和 rowspan 的工作原理
水平合并（colspan）: 想象一下，当你创建一个日程表，而一个课程是在多个教室内进行的。 你可以用 colspan 合并单元格，来表示某个课程跨越了两个时间段。
垂直合并（rowspan）: 想象一下，你有一个比赛结果表格，其中一位参赛者参加了多个阶段。 你可以用 rowspan 合并单元格，来表示某位参赛者跨越了两个阶段。
实用示例
创建跨多列的标题: 如果你的表格中有不同的数据类别，你希望创建一个跨多列的标题，可以使用 colspan。 例如，标题 "员工信息" 可以覆盖列 "名字"、"年龄" 和 "部门"。
垂直合并数据: 如果你的数据需要垂直合并，例如同一个人或物体有多条记录，可以用 rowspan。 例如，如果你的项目有多阶段（如项目阶段数据），可以用 rowspan 来合并描述单元格。
8.4 示例
假设你有一个表格，显示员工及其参与的不同项目：
- 员工：Ivan、Maria、Peter。
- 项目：项目 A、项目 B。
你想要合并单元格，显示 Ivan 和 Maria 同时参与了两个项目：
<table border="1">
<tr>
<th>名字</th>
<th>项目 A</th>
<th>项目 B</th>
<th>城市</th>
</tr>
<tr>
<td>Ivan</td>
<td colspan="2">是</td>
<td>伦敦</td>
</tr>
<tr>
<td>Maria</td>
<td colspan="2">是</td>
<td>伦敦</td>
</tr>
<tr>
<td>Peter</td>
<td>是</td>
<th>否</th>
<td>罗马</td>
</tr>
</table>
或者，如果你想要显示 Ivan 参与了两个项目：
<table border="1">
<tr>
<th>名字</th>
<th>项目</th>
<th>城市</th>
</tr>
<tr>
<td rowspan="2">Ivan</td>
<td>项目 A</td>
<td>伦敦</td>
</tr>
<tr>
<!-- 空白 -->
<td>项目 B</td>
<td>伦敦</td>
</tr>
<tr>
<td>Sergey</td>
<td>项目 C</td>
<td>罗马</td>
</tr>
</table>
我特意在被合并的单元格位置插入了注释，这样可以更清楚地看到剩下的部分是如何显示的。
GO TO FULL VERSION