HTML Colgroup

The <colgroup> element in HTML is used to group together one or more <col> elements within a <table>. This helps in applying styles or attributes to a set of columns collectively rather than individually. It’s particularly useful when you want to style or set properties for multiple columns at once.

Here’s a basic rundown of how it works:

<colgroup> Element: This element is used to define a group of columns in a table. You can use it to specify attributes or styles that will be applied to the columns within the group.
<col> Element: This element defines the properties for each column within the <colgroup>. You can use it to set attributes like width for the columns.

Basic Example

Here’s a simple example of using <colgroup> to set the width of columns in a table:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colgroup Example</title>
    <style>
        /* Optional CSS for better visualization */
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color: lightgrey;">
            <col style="background-color: lightblue;">
            <col style="background-color: lightgreen;">
        </colgroup>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
            </tr>
            <tr>
                <td>Data 4</td>
                <td>Data 5</td>
                <td>Data 6</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this example:

The <colgroup> element groups the three <col> elements.
Each <col> element has a different background color applied.

Advanced Example

You can also use the span attribute in the <col> element to apply styles to multiple columns:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Colgroup Advanced Example</title>
    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
        }
        th, td {
            padding: 8px;
            text-align: left;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col style="background-color: lightgrey;">
            <col style="background-color: lightblue;" span="2">
        </colgroup>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
                <th>Column 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
            <tr>
                <td>Data 5</td>
                <td>Data 6</td>
                <td>Data 7</td>
                <td>Data 8</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

In this advanced example:

The first <col> element styles the first column.
The second <col> element with span="2" applies styles to the next two columns.

Using <colgroup> and <col> can make table styling more efficient and organized, especially for tables with many columns.

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Disclaimer About Us