HTML表格单元格合并

80次阅读
没有评论

要为HTML表格添加单元格合并,可以使用 colspan 和 rowspan 属性。 colspan 属性指定单元格应该横跨的列数, rowspan 属性指定单元格应该纵跨的行数。这些属性通常与 td 或 th 元素一起使用。

下面是一个示例HTML页面,其中显示了如何为表格添加单元格合并:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML Table Cell Merging Example</title>
</head>
<body>
<table border="1">
    <tr>
        <th>Month</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>January</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>February</td>
        <td>$80</td>
    </tr>
    <tr>
        <td colspan="2">Quarter 1 Total: $180</td>
    </tr>
    <tr>
        <td>March</td>
        <td>$75</td>
    </tr>
    <tr>
        <td>April</td>
        <td>$120</td>
    </tr>
    <tr>
        <td>May</td>
        <td>$100</td>
    </tr>
    <tr>
        <td colspan="2">Quarter 2 Total: $295</td>
    </tr>
</table>
</body>
</html>

在这个例子中,第一个 tr 标签定义了表格的表头,其中包含两个 th 元素,用于显示月份和储蓄金额。接下来的几个 tr 标签定义了表格中的数据行,其中每个行都包含一个 td 元素,其中第一个列包含月份,第二个列包含储蓄金额。

在第四个 tr 标签中,colspan 属性设置为 2,指示单元格应该横跨整个行,因为此单元格的数据跨越了所有列。 同样,在第八个 tr 标签中, colspan 属性也设置为 2,以指示单元格应该横跨整个行。

请注意,也可以使用 rowspan 属性将单元格纵向合并。

正文完
 
评论(没有评论)