1、水平方向合并
- 特点：向右合并
- colspan
td标签的属性
值代表当前td向右作为几个td
要删除多出来的td - 例如:
<td colspan="2"></td>
含义： 把当前单元格当做两个单元格来看待
2、垂直方向合并
- 合并特点：向下合并
- rowspan
td标签的属性
值代表当前td向下作为几个td
要删除多出来的td - 例如:
<td rowspan="2"></td>
含义: 把当前单元格当做两个单元格来看待
注意点:
- 由于把某一个单元格当做了多个单元格来看到, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示
- 一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并
<body>
<!--
需求: 第一行的第2列和第3列合并为一个单元格,怎么办?
colspan: 设置个哪一个单元格,值是几,哪一个单元格就会水平向右变成几个单元格的宽度
总结: colspan
水平向右进行扩展
1. 要合并n个单元格,就要删除n-1个单元格,要删除的是要进行扩展的单元格(设置了colspan=n的这个单元格)后面的单元格
2. 要给要给某一个单元格设置colspan=n
-->
<table bgcolor="gray" width="300" height="150" cellspacing="1">
<tr bgcolor="white">
<td></td>
<td colspan="2"></td>
</tr>
<tr bgcolor="white">
<td colspan="2"></td>
<!--<td></td>-->
<td></td>
</tr>
<tr bgcolor="white">
<td></td>
<td></td>
<td></td>
</tr>
<tr bgcolor="white">
<td colspan="3"></td>
<!--<td></td>-->
<!--<td></td>-->
</tr>
</table>
<br>
<hr>
<!--
纵向合并单元格:
合并的方向垂直向下
rowspan: 设置个哪一个单元格,值是几,哪一个单元格就会垂直向下变成几个单元格的宽度
1. 设置rowspan属性, 设置在要合并的单元格的第一个,要合并n个单元格,值就是n
2. 删除多出来的单元格,删除n-1个单元格
-->
<table bgcolor="gray" width="300" height="150" cellspacing="1">
<tr bgcolor="white">
<td rowspan="2"></td>
<td></td>
<td rowspan="4"></td>
</tr>
<tr bgcolor="white">
<!--<td></td>-->
<td rowspan="3"></td>
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--<td></td>-->
<!--<td></td>-->
</tr>
<tr bgcolor="white">
<td></td>
<!--<td></td>-->
<!--<td></td>-->
</tr>
</table>
</body>
图片.png
