HTML的colgroup标签


HTML Colgroup标签

简介

Colgroup标签定义表格的列组。使用colgroup标签可以为表格的列设置公共的属性。你可以使用一个colgroup标签来为不同列设置不同的样式,colgroup中的col标签继承colgroup标签中的信息。

语法

<colgroup>
    <col 属性1="属性值1" 属性2="属性值2" ...>
    <col 属性1="属性值1" 属性2="属性值2" ...>
    ...
</colgroup>

colgroup标签内可以有多个col标签,用来为每一列设置不同的属性。当前列中任何没设置的属性值将使用来自colgroup标签的值,如果两者都没有设置,则将使用表格的默认值。

属性

Colgroup标签定义的属性主要用于指定此列的特殊属性和样式。

属性 描述
span 定义列的数量

span属性

Span属性规定列应该横跨多少列。如果没有设置,它默认是1。

<colgroup span="2">
    <col style="background-color:red">
    <col style="background-color:yellow">
</colgroup>

在上述例子中,两列将会被跨过,第一个设置了红色的背景色,第二个列设置了黄色的背景色。

使用Colgroup标签

使用colgroup标签可以使你在表格内更好地控制字符,并使表格更易于阅读和理解。
下面的示例为表格不同的列分别定义了一个col标签:

<table>
    <colgroup>
        <col style="background-color:red">
        <col>
        <col>
    </colgroup>
    <thead>
        <tr>
            <th>Month</th>
            <th>Savings</th>
            <th>Expenses</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>January</td>
            <td>$100</td>
            <td>$80</td>
        </tr>
        <tr>
            <td>February</td>
            <td>$80</td>
            <td>$60</td>
        </tr>
    </tbody>
</table>

在这个例子中,定义的第一个col标签设置了红色的背景色,只应用于表格的第一列。

注意事项

  • colgroup标签必须在table标签内使用。
  • colgroup标签不能嵌套在colgroup标签内。
  • 当使用colgroup标签时,如果未指定任何属性,那么colgroup标签中的所有列元素都将继承它们的父元素的属性。