Topic 39 of 57 7. HTML Tables Interactive Tutorial

HTML Colgroup Tag: Structure, Attributes, and Examples

11 mins read Last updated: 12 Nov 2026 14,100 views

On This Page0 sectionsQuick jump to subtopic

Topic Overview & Definition

Key Question

What is the HTML <colgroup> tag and how does it style entire table columns efficiently?

Direct Answer & Overview

The HTML (column group) element specifies formatting and styles for entire columns in a table without repeating CSS classes across hundreds of individual cells. Placed directly after and before , it contains one or more elements with the 'span' attribute.

Comprehensive Step-by-Step Concepts

1) Problem Solved by : If a table has 500 rows and you want to highlight the third column in light blue, repeating class="highlight" across 500 individual elements inflates HTML payload size. solves this by styling the column once at the top of the table. 2) Placement in Document: The element must be placed before any , , , or elements, and directly after if present. 3) The Child Tag: Inside , individual columns are targeted using void elements. A can span multiple columns using the 'span' attribute (e.g. ). 4) Supported CSS Properties on : Due to browser rendering engine constraints, only four CSS properties can be applied to and : - 'background' (background-color, background-image) - 'border' (when border-collapse is collapse) - 'width' (column width) - 'visibility' (visibility: collapse) 5) Combining Multiple Column Groups: You can define multiple tags to separate customer data columns from pricing and invoice calculation columns.

Runnable HTML5 Code Example & Practical Implementation

index.html

HTML Editor

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Colgroup Styling Showcase</title>
    <style>
        table { border-collapse: collapse; width: 100%; max-width: 650px; font-family: sans-serif; }
        th, td { border: 1px solid #cbd5e1; padding: 10px; text-align: left; }
        /* Styling entire columns via colgroup classes */
        .col-id { width: 60px; background-color: #f1f5f9; text-align: center; }
        .col-featured { background-color: #eff6ff; font-weight: 600; }
    </style>
</head>
<body>
    <h2>User Subscription Tiers</h2>
    <table>
        <!-- Column Group Definition -->
        <colgroup>
            <col class="col-id">
            <col style="width: 180px;">
            <col class="col-featured">
            <col style="width: 100px;">
        </colgroup>
        <thead>
            <tr>
                <th scope="col">ID</th>
                <th scope="col">Plan Name</th>
                <th scope="col">Storage Capacity</th>
                <th scope="col">Monthly Fee</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Starter</td>
                <td>15 GB Cloud Storage</td>
                <td>$0.00</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Professional</td>
                <td>500 GB Cloud Storage</td>
                <td>$12.00</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Enterprise</td>
                <td>5 TB Cloud Storage</td>
                <td>$49.00</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Key Takeaways, Best Practices & Standards

Best Practice & Standards

Use to set column widths and alternating column background highlights cleanly without cluttering individual cells.

Common Technical & Interview Questions

Q1: Why doesn't 'color: red;' work when applied to a or tag?

A1: According to CSS2.1 specifications, column elements do not exist in the DOM element tree as ancestors of cell elements. Browsers only permit four specific properties on columns: background, border, width, and visibility.

Q2: What is the function of the 'span' attribute on a tag?

A2: The 'span' attribute defines how many consecutive columns the styles apply to. For example, '' applies background color across the next three columns.

Q3: Can a table have multiple elements?

A3: Yes! Multiple elements can be used to demarcate major structural groups of columns (e.g. personal information columns vs billing columns).

All HTML Topics

Previous TopicHTML Table Styling: CSS Properties and Examples

Next TopicHTML Colspan and Rowspan: How to Merge Table Cells