Colgroup as the name suggests, is used to apply styles to the columns of a table in HTML.
Let us say, we have the below table,
And we need to apply the color green to the first column(i.e. The Name column).
We can get it done using the colgroup element and the col element by placing them within the table element.
<html>
<body>
<table border = "1">
<colgroup>
<col style="background-color: green;">
</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, if you look at the above output, the color green is applied on the first column (i.e. The name column).
Now, if you look at the code, we have added the colgroup element inside the table element.
<table border = "1"> <colgroup> ... </colgroup> ... </table>
Inside the colgroup element, we have placed the col element with the style attribute mentioning the color as green.
<colgroup> <col style="background-color: green;"> </colgroup>
Just note that there can be multiple col elements inside the colgroup element. In this case we have only one col element which applies color to the first column of the table.
Now, let us see how can we apply color green to the first column and color red to the second column.
<html>
<body>
<table border = "1">
<colgroup>
<col style="background-color: green;">
<col style="background-color: red;">
</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, in the above example, we have applied color green to the first column and color red to the second column.
Now, if you look at the code, inside the colgroup element, we have placed two col elements.
<colgroup> <col style="background-color: green;"> <col style="background-color: red;"> </colgroup>
The first col element is for the first column. And color green is applied to the first column.
<col style="background-color: green;">
And the second col element is for the second column. And color red is applied to it.
<col style="background-color: red;">
Let us say, we want to apply color green to the third column of the table.
<html>
<body>
<table border = "1">
<colgroup>
<col>
<col>
<col style="background-color: green;">
</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, to apply color to the third column, the first thing we need to do is, place two empty col elements, which says do not apply any style to the first two columns.
And in the third col element, place the style attribute specifying its color as green.
<colgroup> <col> <col> <col style="background-color: green;"> </colgroup>
As a result, no color is applied to first two columns and color green is applied in the third column.
So, far we have seen, how can we apply styles using the col element and the style attribute.
Now, let us see the span attribute for col element.
<html>
<body>
<table border = "1">
<colgroup>
<col span="1" style="background-color: green;">
</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
In the above example, we have used the span attribute along with the style attribute to apply color green to the first element.
<colgroup> <col span="1" style="background-color: green;"> </colgroup>
The attribute span="1" says, apply the color green to the first column.
Now, what if we want to apply color green to the third column.
Let us see in the below example.
<html>
<body>
<table border = "1">
<colgroup>
<col span="2">
<col span="1" style="background-color: green;">
</colgroup>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll</th>
</tr>
<tr>
<td>John</td>
<td>5</td>
<td>1</td>
</tr>
<tr>
<td>Paul</td>
<td>7</td>
<td>12</td>
</tr>
<tr>
<td>Mohan</td>
<td>3</td>
<td>21</td>
</tr>
</table>
</body>
</html>
So, in the above example, we have used span="2" with the first col element. And specified no style attribute in it.
<col span="2">
With this, no style is applied to the first two columns.
Now, the next col element would be referring to the third column.
So, when we specify span="1" and style="background-color: green;" in the next col element, the color green is applied to the third column.