HTML <colgroup> Tag
In this tutorial, we will learn about colgroup tag in HTML with the help of examples.
<colgroup> Tag
Colgroup tag <colgroup> is used for specifying properties for a group of columns within a table.
It is used to applying styles to entire columns in a row, instead of apply styling for each column with the help of <col> tag.
Note : The <colgroup> tag must be used immediately after the <caption> tag as children of the <table> tag.
Syntax
<colgroup>.....</colgroup>
Example
<!DOCTYPE html>
<html>
<head>
<title>Colgroup Tag</title>
</head>
<body>
<table>
<colgroup>
<col span = "1" style = "background-color : red">
<col span = "1" style = "background-color : yellow">
<col span = "1" style = "background-color : greenyellow">
</colgroup>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
</tr>
<tr>
<td>Sunny</td>
<td>Chaudhary</td>
<td>20</td>
</tr>
<tr>
<td>Anu</td>
<td>Chaudhary</td>
<td>19</td>
</tr>
</table>
</body>
</html>Output
| First Name | Last Name | Age |
|---|---|---|
| Sunny | Chaudhary | 20 |
| Anu | Chaudhary | 19 |
Specific Attribute
| Attribute | Value | Description |
|---|---|---|
| align | right left center justify char |
Defines the horizontal alignment of the columns |
| char | character | Define a character to use to align the text |
| charoff | pixel | Specifies an alignment offset (either in px or percentage value) against the first character as specified with the char attribute |
| span | number | Defines the number of columns the <col> should span |
| valign | bottom middle top baseline |
Defines verticle alignment |
| width | pixels percentage |
Specifies a default width for each column spanned by the current <col> element |
Global Attribute
Colgroup Tag support all the global attributes of HTML.
Event Attribute
Colgroup Tag support all the event attributes of HTML.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of colgroup tag in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML data Tag.