View Categories

HTML Table Colgroup

The <colgroup> element in HTML is used to group together one or more columns in a table for the purpose of applying shared styles or scripts. It enhances readability and simplifies styling by allowing you to define attributes or CSS properties for specific columns within the group.

Why Use <colgroup>?

The <colgroup> tag is useful for managing the layout and appearance of a table, especially when you want to control the styles or attributes of multiple columns at once. It is commonly used in combination with the <col> element, where each <col> represents an individual column.

Steps to Use <colgroup> in HTML:

  1. Insert <colgroup> Tag: Place the <colgroup> tag inside the <table> element.
  2. Define Columns: Within the <colgroup>, use one or more <col> tags to represent each column. Specify attributes such as width, style, or class to define the appearance or functionality of each column.
  3. Apply Styles or Attributes: You can define styles or attributes like width or background color in the <col> tags to format the columns consistently.

Example 1: Using <colgroup> to Style Columns

In this example, we will style two columns in a table using the <colgroup> element. Each column has a different width, and the table rows are styled with a CSS class to differentiate them.

<!DOCTYPE html>
<html>
<head>
    <style>
        .highlight {
            background-color: #f2f2f2;
        }
    </style>
</head>
<body>
    <table border="1">
        <colgroup>
            <col style="width: 30%;">
            <col style="width: 70%;">
        </colgroup>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Row 1, Col 1</td>
                <td>Row 1, Col 2</td>
            </tr>
            <tr class="highlight">
                <td>Row 2, Col 1</td>
                <td>Row 2, Col 2</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Example 2: Applying CSS to Columns using <colgroup>

This example shows how to use the <colgroup> element to apply specific CSS styles to columns, including width, background color, and borders.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }
        colgroup {
            background-color: #f0f0f0;
            border: 2px solid #3498db;
        }
        col {
            background-color: #ecf0f1;
            border: 1px solid #bdc3c7;
        }
        td, th {
            border: 1px solid #dddddd;
            text-align: left;
            padding: 8px;
        }
    </style>
</head>
<body>
    <table>
        <colgroup>
            <col>
            <col style="width: 30%;">
            <col>
        </colgroup>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 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>

Example 3: Empty Column Groups

You can also use an empty <colgroup> as a placeholder for future styling. In the following example, no specific columns are defined, so the styling applies only to the first column.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        colgroup {
            background-color: red;
            border: 2px solid black;
        }
    </style>
</head>
<body>
    <table border="3">
        <colgroup></colgroup>
        <thead>
            <tr>
                <th>Header 1</th>
                <th>Header 2</th>
                <th>Header 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>

CSS Properties Allowed on <colgroup>

Here are the CSS properties that can be applied to the <colgroup> element:

  • CSS width Property: Specifies the width of the column.
  • CSS visibility Property: Allows hiding or showing the column without affecting the layout.
  • CSS background Property: Used to set the background color of the column.
  • CSS border Property: Allows you to create borders around the columns.

Note: The <colgroup> tag must be placed directly within the <table> element and before other table elements such as <thead>, <tbody>, <tr>, <td>, or <th>, but after the <caption> element if present.

Want to learn HTML with an instructor, either offline or online? Find experienced tutors near you and join Coaching Wallah—completely free for students!

What are your Feelings

Leave your comment