RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://webplatform.github.io/docs/html/elements/colgroup below:

colgroup · WebPlatform Docs

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">
    
    <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">
        
        <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