HTML Table Colgroup

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.