Open In App

HTML <colgroup> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

HTML is a versatile language, and one of its most useful elements is the <colgroup> tag. This tag is used to group one or more columns in a table for formatting purposes. It’s a handy tool for applying styles to entire columns, saving you the trouble of repeating styles for each cell.

Understanding the <colgroup> Tag

The <colgroup> tag is used in conjunction with the <col> tag. The <col> tag is nested within the <colgroup> tag and is used to define properties for columns.

Note: The <colgroup> tag also supports the Global Attributes and Event Attributes in HTML.

Syntax:

<colgroup> Column lists... </colgroup>

Attributes:

Attribute Values

Description

span

It is used to specify the number of columns that have a colgroup tag. The values are in numeric form.

Deprecated Attributes:

Attribute Values

Description

align

It is used to align the text or content in the group of columns. The value of the aligned property is left, right, center, justify, and char.

char

It is used to align the character in a column group and the value of these attributes is the character.

charoff

It is used to set the number of characters that will be aligned from the character specified by the char attribute. The value of these attributes is in numeric form.

valign

It specifies the vertical alignment of content in a colgroup. Its values are the top, middle, bottom, baseline.

width

It defines the width of a column group. Its values are pixels, %, relative_length.

Example of HTML colgroup Tag

Example: In this example, we will see the implementation of HTML colgroup tag.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML5 colgroup Tag</title>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML colgroup tag</h2>
    <table>
        <!-- colgroup tag starts here-->

        <colgroup>
            <col span="2" 
                 style="background-color: green; color: white" />
            <col style="background-color: tomato" />

            <!-- colgroup tag ends here-->
        </colgroup>
        <tr>
            <th>STUDENT</th>
            <th>COURSE</th>
            <th>AGE</th>
        </tr>
        <tr>
            <td>Manas Chhabra</td>
            <td>BCA</td>
            <td>19</td>
        </tr>
        <tr>
            <td>Anurag Gupta</td>
            <td>B.TECH</td>
            <td>23</td>
        </tr>
    </table>
</body>

</html>

Output: 

HTML colgroup tag

Supported Browsers: 

  • Google Chrome 1
  • Edge 12
  • Firefox 1
  • Opera 15
  • Safari 4

Last Updated : 27 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads