Table of contents

HTML <colgroup> Tag

The HTML <colgroup> tag is used to group one or more columns within a table for styling purposes. It allows developers to apply styles, such as width, background color, and other CSS properties, to specific columns or groups of columns, making it a valuable tool for table organization. The <colgroup> tag is typically used in conjunction with the <col> tag to define the number of columns and their appearance.

Syntax of the <colgroup> Tag

The <colgroup> tag is placed directly inside the <table> element, before the <tbody>, <thead>, or <tfoot> tags. Here's the syntax:

html
<table>
    <colgroup>
        <col span="number_of_columns" style="CSS_properties">
    </colgroup>
    <tr>
        <!-- Table rows and data -->
    </tr>
</table>
  • span: Defines the number of columns the <col> element should apply to.
  • style: Applies CSS styles, such as width or background color, to the grouped columns.

Attributes of the <colgroup> Tag

The <colgroup> tag supports the following attributes to control the appearance and behavior of table columns:

AttributeDescription
spanSpecifies the number of columns the <colgroup> applies to.
global attributesSupports global attributes like class, id, and style.
  • span: This is the most important attribute of the <colgroup> tag. It defines how many columns the group should apply to.

The <colgroup> tag also supports all global attributes, such as class, id, lang, and style, for better control and customization of column presentation.

Examples of HTML <colgroup> Tag

Example 1: Styling Columns with <colgroup>

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Column Group Example</title>
    <style>
        colgroup col {
            background-color: lightgrey;
        }
    </style>
</head>
<body>
    <table border="1">
        <colgroup>
            <col span="2">
            <col style="background-color: yellow;">
        </colgroup>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Stock</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>$1</td>
            <td>In Stock</td>
        </tr>
        <tr>
            <td>Banana</td>
            <td>$0.5</td>
            <td>Out of Stock</td>
        </tr>
    </table>
</body>
</html>

In this example, the first two columns have a light grey background, while the third column has a yellow background. The <colgroup> tag is used to group and style these columns.

Example 2: Defining Column Widths with <colgroup>

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Column Width Example</title>
</head>
<body>
    <table border="1">
        <colgroup>
            <col style="width: 30%;">
            <col style="width: 50%;">
            <col style="width: 20%;">
        </colgroup>
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
        </tr>
        <tr>
            <td>John Doe</td>
            <td>john@example.com</td>
            <td>123-456-7890</td>
        </tr>
        <tr>
            <td>Jane Smith</td>
            <td>jane@example.com</td>
            <td>987-654-3210</td>
        </tr>
    </table>
</body>
</html>

In this example, the <colgroup> tag is used to define the width of the columns. The first column takes up 30% of the table width, the second 50%, and the third 20%.

FAQs About HTML <colgroup> Tag

Q1: What is the purpose of the HTML <colgroup> tag?
A: The <colgroup> tag is used to group columns within a table and apply styles or attributes to the entire group of columns, helping to organize and style the table more efficiently.

Q2: How does the span attribute in the <colgroup> tag work?
A: The span attribute defines how many columns the styles applied to the <col> element should cover. For example, span="2" means the styling will apply to the first two columns.

Q3: Can the <colgroup> tag be used without the <col> tag?
A: No, the <colgroup> tag should be used with the <col> tag. The <col> tag is what actually applies the styles or attributes to the columns.

Q4: Does the <colgroup>** tag support global attributes?
A: Yes, the <colgroup> tag supports global attributes like class, id, style, and lang, allowing for more detailed customization.

Q5: What is the difference between <colgroup> and <thead> in a table?
A: The <colgroup> tag is used to group and style columns, whereas the <thead> tag is used to group rows in the header section of the table. Both serve different organizational purposes within a table.

HTML

Related Articles