HTML <colgroup>

Welcome to The Coding College, where coding concepts are simplified for everyone! This tutorial explains how the <colgroup> element in HTML is used to group and style table columns effectively.

What Is the <colgroup> Element?

The <colgroup> element defines a group of columns in an HTML table, allowing you to apply styles or attributes to entire columns instead of individual cells.

Syntax

<table>
    <colgroup>
        <col>
        <col>
    </colgroup>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
    </tr>
</table>

The <colgroup> contains one or more <col> elements, each corresponding to a column in the table.

Why Use <colgroup>?

1. Apply Styles Easily: Style multiple columns simultaneously.
2. Improve Table Readability: Highlight specific columns for better visual appeal.
3. Add Attributes: Assign attributes like width, alignment, or class to groups of columns.

Examples

1. Basic Example

Here’s how you can use <colgroup> to define columns:

<table border="1">
    <colgroup>
        <col style="background-color: lightblue;">
        <col style="background-color: lightyellow;">
    </colgroup>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Anna</td>
        <td>25</td>
    </tr>
</table>

Output:

• The first column will have a light blue background.
• The second column will have a light yellow background.

2. Applying Width to Columns

You can set column widths using the <col> element.

<table border="1">
    <colgroup>
        <col style="width: 50%;">
        <col style="width: 50%;">
    </colgroup>
    <tr>
        <th>Product</th>
        <th>Price</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>$1000</td>
    </tr>
    <tr>
        <td>Smartphone</td>
        <td>$800</td>
    </tr>
</table>

Output:

• Both columns will have equal width, splitting the table into two halves.

3. Span Multiple Columns

Use the span attribute to apply styles to multiple columns at once.

<table border="1">
    <colgroup>
        <col span="2" style="background-color: lightgray;">
    </colgroup>
    <tr>
        <th>City</th>
        <th>Country</th>
    </tr>
    <tr>
        <td>New York</td>
        <td>USA</td>
    </tr>
    <tr>
        <td>London</td>
        <td>UK</td>
    </tr>
</table>

Output:

• Both columns will have a light gray background.

<colgroup> vs. <thead> and <tbody>

Key Notes

1. <colgroup> must appear immediately after the <table> tag and before any <thead>, <tbody>, or <tr> elements.
2. If no <col> elements are specified within <colgroup>, all columns are styled.
3. Inline CSS is commonly used with <col> for quick styling, but external CSS is recommended for maintainability.

Conclusion

The <colgroup> element is a powerful tool for styling and managing table columns. It simplifies your code by allowing you to group columns and apply consistent styles or attributes effortlessly.

Discover more useful tutorials at The Coding College and make your coding journey easier and more enjoyable.