The **`colgroup`** tag in HTML is used to format a group of columns in a table. It is used to set the properties of the columns altogether instead of manipulating individual ones. 

>The `colgroup` tag is used inside the `table` element and along with the `col` tag in HTML.

The illustration below shows how the `colgroup` tag works in HTML:

# Syntax 

The syntax of `colgroup` tag is as follows:

```HTML
<colgroup> 
<col attribute = value> 
</colgroup>
```

We begin by opening the tags using the `<>` symbol. In between, we write the keyword`colgroup`. We then close the tags using the `</>` symbol. Once again, we will place the name of our tag in-between `<>` and after the `/` symbol. `colgroup` is used along with the `col` tag. The `col` tag has the following syntax:

```HTML
<col attribute = value>
```

We open the tags using the `<>` symbol. The keyword `col` and related attributes come within.

# Attributes

Style attributes can be placed within the `col` tag. Some prominent ones are listed below:

| Attribute  | Purpose  |
| - | - |
| `span`  | Used to indicate the number of consecutive columns to apply the specified properties on. By default, the value is 1.   |
| `background-color` | Changes the background color of the columns.  |
|  `width` |  Changes the width of the column. Value in pixels |
| `height`  |  Changes the height of the column. Value in pixels |
 
# Example

The following code snippet shows how we can use the `colgroup` tag in HTML:

<html>
 <head>
 </head>
 <body>
  <table>  
    <colgroup>
    <col span="2" style="background-color:green">
    <col style="background-color:blue">
    <col style="width:150px">
    </colgroup>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Country </th>
      <th>Favorite Sport</th>
    </tr>
    <tr>
      <td>Bob</td>
      <td>20</td>
      <td>America</td>
      <td>Soccer</td>
    </tr>
    <tr>
      <td>Alice</td>
      <td>21</td>
      <td>Canada</td>
      <td>Baseball</td>
    </tr>
    <tr>
      <td>Jack</td>
      <td>22</td>
      <td>Spain</td>
      <td>Basketball</td>
    </tr>
  </table> 
 </body>
</html>

codemirror

> **`span`** applies style attributes to the number of columns specified. In our case, we styled the first two columns together. 

> We can also style a single column. In that case, we need not specify a value for `span`. Instead, it chooses 1 by default. This is shown in the third column. 

> The **`width`** attribute adjusts the width of the column to the number of pixels specified. This is shown in the fourth column.

> **`<tr>`**, **`<th>`** and **`<td>`** tags are used to place rows, headings and data respectively.

What is colgroup tag in HTML?

The colgroup tag in HTML formats column groups in tables, setting properties for multiple columns collectively instead of individually.

Attribute	Purpose
`span`	Used to indicate the number of consecutive columns to apply the specified properties on. By default, the value is 1.
`background-color`	Changes the background color of the columns.
`width`	Changes the width of the column. Value in pixels
`height`	Changes the height of the column. Value in pixels