一、表格的单元格合并
在某些特殊的情况下，每个单元格所占据的大小可能并不是固定的，会出现单元格合并的情况，如下图所示：
表格合并分为两种情况，行合并和列合并：
- 跨列合并：使用
colspan，在最左边的单元格写上colspan属性，并且省略合并掉的td - 跨行合并：使用
rowspan，在最上面的单元格写上rowspan属性，并且省略掉后面tr中的td
首先创建一个表格，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid #333;
padding: 4px 16px;
}
</style>
</head>
<body>
<table>
<!-- 表格第一行 -->
<tr>
<td>#</td>
<td>Fist</td>
<td>Last</td>
<td>Handle</td>
</tr>
<!-- 表格第二行 -->
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<!-- 表格第三行 -->
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<!-- 表格第四行 -->
<tr>
<td>3</td>
<td>Lary</td>
<td>Bird</td>
<td>@twitter</td>
</tr>
</table>
</body>
</html>
在浏览器中打开 HTML，具体效果如下：
合并列
在进行单元格合并的时候，首先确定合并的是行还是列，其中 tr 表示行，td 表示列；接着确定跨行或者跨列的数量；最后再删除多余的行或者列。
在上述的 HTML 代码中设置第二列和第三列合并，具体代码如下：
<table>
<!-- 表格第一行 -->
<tr>
<td>#</td>
<td>Fist</td>
<td>Last</td>
<td>Handle</td>
</tr>
<!-- 表格第二行 -->
<tr>
<!-- 第二行第一列 -->
<td>1</td>
<!-- 第二行第二列 -->
<!-- 跨两列，第二三两列， -->
<td colspan="2">Mark</td>
<!-- 第二行第三列 -->
<!-- <td>Otto</td> -->
<!-- 第二行第四列 -->
<td>@mdo</td>
</tr>
<!-- 表格第三行 -->
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<!-- 表格第四行 -->
<tr>
<td>3</td>
<td>Lary</td>
<td>Bird</td>
<td>@twitter</td>
</tr>
在浏览器中打开 HTML 页面，效果如下：
需要注意的是合并后要删除多余的 td，否则就会出现错乱的情况，如下所示：
合并行
在进行跨行单元格合并的时候，要先确定跨行的数量；最后再删除多余的行。
在上述的 HTML 页面中设置跨行，设置第三行和第四行的第三列进行合并，具体的 HTML 代码如下所示：
<table>
<!-- 表格第一行 -->
<tr>
<td>#</td>
<td>Fist</td>
<td>Last</td>
<td>Handle</td>
</tr>
<!-- 表格第二行 -->
<tr>
<!-- 第二行第一列 -->
<td>1</td>
<!-- 第二行第二列 -->
<!-- 跨两列， -->
<td colspan="2">Mark</td>
<!-- 第二行第三列 -->
<!-- <td>Otto</td> -->
<!-- 第二行第四列 -->
<td>@mdo</td>
</tr>
<!-- 表格第三行 -->
<tr>
<td>2</td>
<td>Jacob</td>
<!-- 跨两行，第三列第三四两行， -->
<td rowspan="2">Thornton</td>
<td>@fat</td>
</tr>
<!-- 表格第四行 -->
<tr>
<td>3</td>
<td>Lary</td>
<!-- <td>Bird</td> -->
<td>@twitter</td>
</tr>
</table>
在浏览器中打开 HTML 页面，具体效果如下：
可以看到第三行和第四行的第三列已经合并到一起了。
在进行行合并的时候也需要删除多余的 td，否则表格也会错乱，具体如下所示：
在进行列合并的时候，是在同一个 tr 下进行合并的，在进行行合并的时候是在不同的 tr 下的相同的 td 上进行合并的。
