Home / HTML / Tables / Colgroup

HTML Table Colgroup

What is Colgroup?

The <colgroup> element specifies a group of one or more columns in a table for formatting. It's useful for applying styles or properties to entire columns without repeating styles in each cell. The <col> element defines column properties within a colgroup.

Basic Colgroup

Use <colgroup> to group columns and apply styles:

Example
<table style="border-collapse: collapse; width: 100%;">
    <colgroup>
        <col style="background-color: #f2f2f2;">
        <col style="background-color: #e0e0e0;">
        <col style="background-color: #f2f2f2;">
    </colgroup>
    <tr>
        <th style="border: 1px solid black; padding: 8px;">Name</th>
        <th style="border: 1px solid black; padding: 8px;">Age</th>
        <th style="border: 1px solid black; padding: 8px;">City</th>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 8px;">John</td>
        <td style="border: 1px solid black; padding: 8px;">25</td>
        <td style="border: 1px solid black; padding: 8px;">New York</td>
    </tr>
</table>

Col Element Span

Use the span attribute to apply styles to multiple columns:

Example
<table style="border-collapse: collapse; width: 100%;">
    <colgroup>
        <col span="2" style="background-color: #f2f2f2;">
        <col style="background-color: #e0e0e0;">
    </colgroup>
    <tr>
        <th style="border: 1px solid black; padding: 8px;">Name</th>
        <th style="border: 1px solid black; padding: 8px;">Age</th>
        <th style="border: 1px solid black; padding: 8px;">City</th>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 8px;">John</td>
        <td style="border: 1px solid black; padding: 8px;">25</td>
        <td style="border: 1px solid black; padding: 8px;">New York</td>
    </tr>
</table>

Column Width with Colgroup

Use colgroup to set column widths:

Example
<table style="border-collapse: collapse; width: 100%;">
    <colgroup>
        <col style="width: 40%;">
        <col style="width: 30%;">
        <col style="width: 30%;">
    </colgroup>
    <tr>
        <th style="border: 1px solid black; padding: 8px;">Name</th>
        <th style="border: 1px solid black; padding: 8px;">Age</th>
        <th style="border: 1px solid black; padding: 8px;">City</th>
    </tr>
    <tr>
        <td style="border: 1px solid black; padding: 8px;">John Doe</td>
        <td style="border: 1px solid black; padding: 8px;">25</td>
        <td style="border: 1px solid black; padding: 8px;">New York</td>
    </tr>
</table>

Position of Colgroup

The <colgroup> element must appear after the opening <table> tag and before any <thead>, <tbody>, <tfoot>, or <tr> elements:

Example
<table>
    <colgroup>
        <col style="background-color: #f2f2f2;">
        <col style="background-color: #e0e0e0;">
    </colgroup>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
        </tr>
    </tbody>
</table>

Best Practices

← Table Styling HTML Lists →