HTML表格合并单元格注解

486 阅读1分钟

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>

`

`