This page is In Progress

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

colgroup

Summary

The colgroup element (<colgroup>) specifies a group of one or more columns in a table for formatting. This element is useful for applying properties to entire columns, instead of repeating the properties for each cell, for each row.

Overview Table

DOM Interface
HTMLTableColElement

HTML Attributes

  • span = valid non-negative integer

Examples

This example uses the COLGROUP element to assign specific characteristics to two groups of columns in a table.

<html>
<body>
<table border="2" rules="groups">
    <!-- RULES is set to "groups", which places internal dividing lines around
table columns defined by COLGROUP. -->
    <colgroup span="2" style="color: red">
    </colgroup>
    <colgroup style="color: blue">
    </colgroup>
    <tr>
        <td>This column is in the first group.</td>
        <td>This column is in the first group.</td>
        <td>This column is in the second group.</td>
    </tr>
    <tr>
        <td>This column is in the first group.</td>
        <td>This column is in the first group.</td>
        <td>This column is in the second group.</td>
    </tr>
</table>
</body>
</html>

View live example

When COL elements are nested inside a COLGROUP element, the attributes of the COL elements override the attributes of the COLGROUP element. In this example, the last column has no formatting even though COLGROUP spans over all three columns. This happens because the SPAN attribute of the nested COL element overrides the SPAN attribute of the COLGROUP.

<html>
<body>
<table border="2">
    <colgroup span="3" style="color: green; background: black">
        <!-- Styling is applied to only the first two columns, instead of all
    three, and the font color is red instead of green. This is consistent
    with the attributes of the COL element. -->
        <col span="2" style="color: red">
    </colgroup>
    <tr>
        <td>This column is in the first group.</td>
        <td>This column is in the first group.</td>
        <td>This column is in the second group.</td>
    </tr>
    <tr>
        <td>This column is in the first group.</td>
        <td>This column is in the first group.</td>
        <td>This column is in the second group.</td>
    </tr>
</table>
</body>
</html>

View live example

Notes

Remarks

Nested COL elements override COLGROUP elements. Use the SPAN attribute to specify the number of table columns that the COLGROUP defines. This attribute has a default value equal to one.

COL elements can occur outside of a COLGROUP element, and these two elements can be used for similar purposes. However, you must use the COLGROUP element to determine where table internal dividing lines (rules) should go. This is illustrated in the first example .

You should avoid using the SPAN attribute inside the COLGROUP element if there are COL elements nested within it. This is because the SPAN attribute that belongs to the nested COL elements will override the attribute that belongs to the COLGROUP element. This can cause confusing code and possibly unintended results. This behavior is illustrated in the second example.

The table object and its associated elements have a separate table object model, which uses different methods than the general object model. For more information on the table object model, see Building Tables Dynamically.

Related specifications

HTML 5.1
W3C Working Draft
HTML 5
W3C Recommendation
HTML 4.01
W3C Recommendation

See also

Related articles

HTML

Tables

Attributions