colgroup

< html‎ | elements
Jump to: navigation, search

colgroup

This article is In Progress.



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

Examples

View live exampleThis 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 exampleWhen 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>

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.

HTML information

{

Compatibility

Desktop

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? ? ? ?

Mobile

Feature Android BlackBerry Chrome for mobile Firefox Mobile (Gecko) IE Mobile Opera Mobile Opera Mini Safari Mobile
Basic support ? ? ? ? ? ? ? ?

See also

Related articles

HTML



































  • html/elements/colgroup
















… further results

Tables








  • html/elements/colgroup








  • col

Attribution

This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: [Windows Internet Explorer API reference Article]