HTML表格合并单元格注解
表格合并
使用HTML表格标签实现合并单元格的效果。通过使用rowspan和colspan属性,可以跨行或跨列合并单元格,从而实现复杂的表格布局。
- rowspan:用于跨行合并单元格,指定合并的行数。例如,rowspan="4"表示跨越4行。
- colspan:用于跨列合并单元格,指定合并的列数。例如,colspan="3"表示跨越3列。
下面是示例代码的注解:
<table border="2" cellspacing="0" align="center">
<!-- 第一行 -->
<tr>
<th width="100" height="30"></th>
<th width="100" height="30" rowspan="4" bgcolor="black"></th>
<th width="100" height="30"></th>
<th width="100" height="30"></th>
<th width="100" height="30"></th>
</tr>
<!-- 第二行 -->
<tr>
<th width="100" height="30"></th>
<!-- colspan="3"表示跨越3列 -->
<th width="100" height="30" colspan="3" bgcolor="blue"></th>
</tr>
<!-- 第三行 -->
<tr>
<!-- rowspan="5"表示跨越5行 -->
<th width="100" height="30" rowspan="5" bgcolor="yellow" ></th>
<th width="100" height="30"></th>
<th width="100" height="30"></th>
<th width="100" height="30"></th>
</tr>
<!-- 第四行 -->
<tr>
<th width="100" height="30"></th>
<th width="100" height="30" bgcolor="grey" colspan="2"></th>
</tr>
<!-- 第五行 -->
<tr>
<!-- rowspan="2"和colspan="3"同时使用,表示跨越2行和3列 -->
<th width="100" height="60" bgcolor="red" rowspan="2" colspan="3"></th>
<th width="100" height="30"></th>
</tr>
<!-- 第六行 -->
<tr>
<!-- rowspan="2"表示跨越2行 -->
<th width="100" height="30" rowspan="2" bgcolor="green"></th>
</tr>
<!-- 第七行 -->
<tr>
<th width="100" height="30"></th>
<th width="100" height="30"></th>
<th width="100" height="30"></th>
</tr>
<!-- 第八行 -->
<tr>
<th width="100" height="30"></th>
<th width="100" height="30" colspan="3" bgcolor="orange"></th>
<th width="100" height="30"></th>
</tr>
</table>
`