HTML <colgroup> Tag

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The <colgroup> element in HTML is used to group together one or more <col> elements within a table. This grouping allows developers to apply styling, such as width or background color, consistently to entire columns rather than applying styles individually to each cell. Essentially, <colgroup> serves as a structural and semantic wrapper for columns, making table markup cleaner and more manageable, especially for tables with many columns.

While <colgroup> itself does not display any content in the table, it plays a critical role in controlling the presentation of columns. By defining a <colgroup> at the beginning of a table, developers can set column-wide properties that cascade to all cells in the corresponding columns. This is particularly useful for setting uniform widths, applying background colors to specific columns, or enhancing accessibility by clarifying table structure for assistive technologies.

A <colgroup> can contain multiple <col> elements, each representing a single column, and it can also optionally define the number of columns it affects without using individual <col> tags. This flexibility makes it a powerful tool for organizing and styling complex tables while keeping the HTML concise and semantically meaningful.

Properties

Permitted Parents: A <table> element. The <colgroup> must appear after any optional <caption> element but before any <thead>, <th>, <tbody>, <tfoot> and <tr> element.
Content: 0 or more <col> elements
Start/End Tags: Start tag: required, End tag: required

Example

HTML

<table border="1">

    <colgroup span="2" style="background-color: #DFF0D8;"></colgroup>

    <col span="1" style="background-color: lightblue;">

    <tr>

        <th>Country</th>

        <th>Capital</th>

        <th>Population (in millions)</th>

        <th>Language</th>

    </tr>

    <tr>

        <td>USA</td>

        <td>Washington D.C.</td>

        <td>331</td>

        <td>English</td>

    </tr>

    <tr>

        <td>France</td>

        <td>Paris</td>

        <td>67</td>

        <td>French</td>

    </tr>

    <tr>

        <td>Germany</td>

        <td>Berlin</td>

        <td>83</td>

        <td>German</td>

    </tr>

</table>

Result

Editor

Attributes

span: Specifies how many columns to span.

Global Attributes

The <colgroup> tag also supports the Global Attributes in HTML5

Event Attributes

The <colgroup> tag also supports the Event Attributes in HTML5

Browser Support

The following information will show you the current browser support for the HTML <colgroup> tag. Hover over a browser icon to see the version that first introduced support for this HTML tag.