Th **`col`** tag in HTML is used to set properties entire columns instead of individual cells.
> The `col` tag is placed inside the `colgroup` tag.

> The **`colgroup`** tag is used to format a group of columns in a table.

The `col` tag also supports style attributes of CSS.

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

# Syntax 

The `col` tag is written inside the `colgroup` tag.

The syntax of `col` tag is as follows:

```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 code snippet below shows how we can use the `col` 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

> The `col` and `colgroup` tags are part of the `table` tag in HTML.

> The `col` tag comes inside the `colgroup` tag.

> CSS style attributes can be used inside the `col` tag.

> **`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 col tag in HTML?

The col tag sets properties for entire columns in a table, using attributes like span, background-color, width, and height within the colgroup tag.

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