所以，
这个表格，第一行包括A、B、C、D四个小格。
第二行包括E、F、G三个小格。
第三行只包括H一个小格。
第四行只包括I、J两个小格。
这个表格总共4行，所以写4个tr标签对儿。
第一行4个小格，所以第一个tr标签对儿中写4个td标签对儿。
第二行3个小格，所以第二个tr标签对儿中写3个td标签对儿。
第三行1个小格，所以第三个tr标签对儿中写1个td标签对儿。
第四行2个小格，所以第四个tr标签对儿中写2个td标签对儿。
F跨两行，只需要在F所在的td上写rowspan="2"。
G跨三行两列，同时在G所在的td上写rowspan="3"以及colspan="2"。
其他单元格什么属性也没有。
按照这个思路，代码就很好写啦：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>合并单元格</title>
<style>
table,tr,td{
border-collapse: collapse;
}
</style>
</head>
<body>
<!-- 跨列的表格 -->
<h2>跨列的表格</h2>
<table border="1" width="400">
<tr>
<td colspan="2">A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td colspan="3">E</td>
</tr>
<tr>
<td>F</td>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
<!-- 跨行的表格 -->
<h2>跨行的表格</h2>
<table border="1" width="400">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td>G</td>
<td rowspan="3">H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K</td>
<td>L</td>
<td>M</td>
</tr>
</table>
<!-- 同时具有跨行和跨列的表格 -->
<h2>同时具有跨行和跨列的表格</h2>
<table border="1" width="400">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>E</td>
<td rowspan="2">F</td>
<td rowspan="3" colspan="2">G</td>
</tr>
<tr>
<td>H</td>
</tr>
<tr>
<td>I</td>
<td>J</td>
</tr>
</table>
</body>
</html>
在浏览器中显示效果如下：
补充说明：
为了让这三个表格显示的时候不挤在一起，挤在一起不好看，我在每个表格的前面加了一个h2标签，为什么不用h1标签呢？因为HTML规范，每个页面只允许有一个h1标签，而h2可以有多个。
感谢阅读！知识总结不易，请点个赞或转发鼓励一下呗！想系统性学习前端的小伙伴可以关注我！
