description & Usage
The <colgroup> tag is an abbreviation of the word column group, which means a group of columns, and is used to add a CSS appearance feature to the table columns as a group.
With this tag, we can select one or more columns as a group and apply the CSS appearance feature to the group. And it prevents CSS code from being written multiple times.
This tag contains a feature called span, which allows us to select the number of columns in each group.
This tag should be written inside the <table> tag and after the <caption> tag and before the <thead>, <tbody>, <tfoot> and <tr> tags.
If we want to create several different groups, we can use the <col> tag inside the <colgroup> tag.
For a better understanding, consider the following example:
<table>
<colgroup>
<col style="background-color:blue">
<col span="3" style="background-color:black">
<col style="background-color:pink">
<col span="5" style="background-color:red">
</colgroup>
<table>In the example above:
In line 3: first column with blue background color (one group with one column)
In line 4: the second, third and fourth columns with black background color (one group with three columns)
In line 5: fifth column with pink background color (one group with one column)
In line 4: 6th, 7th, 8th, 9th and 10th columns with red background color (one group with five columns)
Browser compatibility and Support
| # | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| <colgroup> |
Attributes
| Attributes | Values | Description |
|---|---|---|
| span |
number
|
Determines how many columns should be opened in the corresponding tags on the right. |
Global Attributes
The <colgroup> tag supports the HTML Global Attributes.
Event Attributes
The <colgroup> tag supports the HTML Event Attributes.
Default CSS
Most browsers will display the <colgroup> tag with the following default style:
