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.

Terms Disclaimer About Us Contact Us