HTML <colgroup> span 属性

在 HTML 表格中，<colgroup> 元素用于定义表格中的列组，可以为一组列定义共同的属性。其中，<colgroup> 元素的 span 属性用于指定该列组跨越的列数。

语法

<colgroup span="number">

其中，number 为一个正整数，表示该列组跨越的列数。

用法

使用 <colgroup> 元素的 span 属性可以方便地定义一组列，并指定它们跨越的列数。这在需要对一组列应用相同的样式或属性时非常有用。

下面是一个简单的示例，演示了如何使用 <colgroup> 元素的 span 属性：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colgroup Span Example</title>
</head>
<body>
    <table border="1">
        <colgroup span="2" style="background-color: lightblue;"></colgroup>
        <tr>
            <td>Row 1, Col 1</td>
            <td>Row 1, Col 2</td>
            <td>Row 1, Col 3</td>
        </tr>
        <tr>
            <td>Row 2, Col 1</td>
            <td>Row 2, Col 2</td>
            <td>Row 2, Col 3</td>
        </tr>
    </table>
</body>
</html>

在上面的示例中，<colgroup> 元素定义了一组跨越两列的列，并为这组列设置了背景颜色为浅蓝色。在表格中，每行的前两列将应用相同的样式。

总结

通过使用 <colgroup> 元素的 span 属性，我们可以轻松地定义一组列，并为它们应用相同的样式或属性。这在开发复杂的表格布局时非常有用，可以提高代码的可维护性和可读性。希望本文对您有所帮助！