1 表格合并是什么
单元格合并分两个方向，通过在 td 上设置属性实现：
colspan：跨列合并，横向合并几个单元格。rowspan：跨行合并，纵向合并几个单元格。
2 合并规则
合并后被占用的单元格必须删掉（注释掉），否则表格结构会错乱。本例中被注释掉的 td 就是被合并掉的单元格。
2.1 colspan — 跨列
colspan="2" 表示这个单元格横向占 2 列，需要把同行后面的 1 个 td 删掉：
<td bgcolor="blue" colspan="2"></td>
<!-- 后面这个td被合并掉了，注释删除 -->2.2 rowspan — 跨行
rowspan="2" 表示这个单元格纵向占 2 行，需要把下一行对应位置的 td 删掉：
<td bgcolor="red" rowspan="2"></td>
<!-- 下一行对应位置的td被合并掉了，注释删除 -->3 caption — 表格标题
caption 标签写在 table 内第一行，显示为表格的标题，默认居中显示在表格上方：
<table>
<caption>表格合并</caption>
...
</table>4 完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>😄 表格合并</title>
</head>
<body>
<table border="2px" width="500px" height="500px" align="center">
<caption>表格合并</caption>
<tr>
<td bgcolor="blue" colspan="2"></td>
<td bgcolor="red" rowspan="2"></td>
<!-- <td bgcolor="green"></td> -->
</tr>
<tr>
<td bgcolor="black" rowspan="2"></td>
<!-- <td bgcolor="yellow"></td> -->
<td bgcolor="purple"></td>
</tr>
<tr>
<!-- <td bgcolor="#ff00ff"></td> -->
<td bgcolor="red" colspan="2"></td>
</tr>
</table>
</body>
</html>