HTML <colgroup> Tag
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 |
---|---|
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 |
---|---|
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. | |
It is used to align the character in a column group and the value of these attributes is the character. | |
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. | |
It specifies the vertical alignment of content in a colgroup. Its values are the top, middle, bottom, baseline. | |
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 colgroup Tag</title>
</head>
<body>
<h1>w3wiki</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:
Supported Browsers:
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4