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:Â
Supported Browsers:Â
- Google Chrome 1
- Edge 12
- Firefox 1
- Opera 15
- Safari 4
Last Updated :
27 Mar, 2024
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...