HTML colgroup Tag

HTML <colgroup> Tag

The HTML <colgroup> tag is used to group one or more <col> elements in a table. It allows you to define shared styles or attributes for columns within the table. By grouping columns, the <colgroup> tag provides a structured way to manage column-wide presentation and layout.

While the <colgroup> tag itself does not apply styles directly, it acts as a container for <col> tags, which specify column-specific styling or attributes like width, class, or background color.

Basic Syntax of <colgroup> Tag

The <colgroup> tag is placed directly after the opening <table> tag and can contain one or more <col> elements. Here’s the basic syntax:

</>

Copy

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

The <colgroup> tag can also use the span attribute to apply settings to multiple columns without needing individual <col> tags for each.

Attributes of <colgroup> Tag

The <colgroup> tag supports the following attributes:

span: Specifies the number of columns the grouping applies to. Default is 1.
class: Assigns a CSS class for styling the group of columns.
style: Allows inline CSS styles for the grouped columns.

Example: Styling Columns with <colgroup>

Here’s an example where the <colgroup> tag is used to style specific columns in a table:

</>

Copy

<!DOCTYPE html>
<html>
    <head>
        <style>
          table {
            width: 100%;
          }
            .highlight {
                background-color: #f4f400;
            }
            .bold-text {
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <h2>Example with Styled Columns</h2>
        <table border="1">
            <colgroup>
                <col class="highlight">
                <col class="bold-text">
            </colgroup>
            <tr>
                <th>Name</th>
                <th>Score</th>
            </tr>
            <tr>
                <td>Alice</td>
                <td>95</td>
            </tr>
            <tr>
                <td>Bob</td>
                <td>89</td>
            </tr>
        </table>
    </body>
</html>

Example for Styling Columns with <colgroup>

Explanation: In this example, the first column has a light gray background due to the .highlight class, and the second column has bold text styling from the .bold-text class.

Using the Span Attribute with colgroup

The span attribute is particularly useful for applying a single style to multiple columns without repeating <col> tags:

</>

Copy

<!DOCTYPE html>
<html>
    <head>
        <style>
            .grouped {
                background-color: #d9edf7;
            }
        </style>
    </head>
    <body>
        <h2>Span Attribute Example</h2>
        <table border="1">
            <colgroup span="2" class="grouped"></colgroup>
            <tr>
                <th>Item</th>
                <th>Category</th>
            </tr>
            <tr>
                <td>Laptop</td>
                <td>Electronics</td>
            </tr>
            <tr>
                <td>Chair</td>
                <td>Furniture</td>
            </tr>
        </table>
    </body>
</html>

Explanation: The span="2" attribute applies the .grouped class to both the first and second columns.

Why Use the <colgroup> Tag?

Using the <colgroup> tag provides several advantages:

Centralized Control: It allows you to manage styles or attributes for multiple columns in one place, reducing redundancy.
Improved Readability: It organizes the code for better readability by grouping column definitions.
Dynamic Styling: You can target entire columns for styling or behavior changes using classes or JavaScript.
Compatibility: It works across major browsers and enhances semantic structure for tables.

Notes on <colgroup> Usage

The <colgroup> tag is optional, but it provides a semantic and centralized way to manage column styling.
If you don’t include a <col> or <span> inside the <colgroup>, the grouping will have no effect.
It must be placed immediately after the <table> tag and before any <thead>, <tbody>, or <tr> tags.
Not all browsers support advanced styling or complex use of the <colgroup> tag equally, so testing is recommended.

TutorialKart

HTML <colgroup> Tag