The HTML colgroup
element is used to group a set of one or more columns in an HTML table. It is often used in conjunction with the col
element to define properties that apply to multiple columns.
The colgroup
element is a container element that is placed within the table
element, before the thead
, tbody
, or tfoot
element(s). It can contain one or more col
elements, which define the properties for each column in the group.
Here’s an example of how to use the colgroup
element to set the width and background color of two columns in a table:
<table>
<colgroup>
<col style="width: 50px; background-color: #f2f2f2;">
<col style="background-color: #fff;">
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
In this example, the colgroup
element contains two col
elements. The first col
element sets the width to 50 pixels and the background color to #f2f2f2, while the second col
element sets the background color to #fff. These properties are applied to the first and second columns of the table, respectively.
You can also use the span
attribute on a col
element to specify the number of columns it should span. For example:
<table>
<colgroup>
<col style="width: 50px; background-color: #f2f2f2;">
<col span="2" style="background-color: #fff;">
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In this example, the second col
element has a span
attribute of 2, which means it spans two columns. This causes the background color to be applied to the second and third columns of the table.