HTML col Tag
HTML col Tag
HTML <col> tag is used to define the properties of each column of a table separately.
- The
<col>tag is defined inside the <colgroup> tag which itself is defined in the<table>tag. - Each
<col>tag in a<colgroup>tag represents a column of the table. One single <col> tag can represent more than one consecutive column too, by using thespanattribute. - The
<col>tag does not have an ending tag.
HTML <col> Tag - Syntax and Usage
The <col> element requires the start(opening) tag, the required syntax for same is given below:
<col style=" " />HTML <col> Tag Basic Example
Below we have a basic example of the <col> tag:
<!doctype html>
<html>
<head>
<title>
Example of col element.
</title>
</head>
<body>
<table>
<colgroup>
<col style="background-color:green" />
<col style="background-color:orange" />
<col style="background-color:red" />
<col style="background-color:lightblue" />
</colgroup>
<tr>
<th>Emp Id</th>
<th>Emp name</th>
<th>DOB</th>
<th>Address</th>
</tr>
<tr>
<td>001</td>
<td>Palak</td>
<td>08-09-1985</td>
<td>11, Adarsh Nagar</td>
</tr>
<tr>
<td>002</td>
<td>Preet</td>
<td>08-10-1984</td>
<td>23,New Delhi</td>
</tr>
<tr>
<td>003</td>
<td>Tilak</td>
<td>22-05-1992</td>
<td>Noida Sec-62</td>
</tr>
</table>
</body>
</html>In the code example above, we have specified 4 <col> tags to style the 4 columns of the table. Now, let's see how we can use a single <col> tag to style multiple columns of a table.
In the example below, we have 2 <col> tags covering 4 columns of the table, using the span attribute with value 2 each.
<table>
<colgroup>
<col span="2" style="background-color:green" />
<col span="2" style="background-color:orange" />
</colgroup>
<tr>
<th>Emp Id</th>
<th>Emp name</th>
<th>DOB</th>
<th>Address</th>
</tr>
<tr>
<td>001</td>
<td>Palak</td>
<td>08-09-1985</td>
<td>11, Adarsh Nagar</td>
</tr>
</table>Output:

In the example below, we have 2 <col> tags covering 4 columns of the table, using the span attribute with value 3 and one <col> tag without the span attribute.
<table>
<colgroup>
<col span="3" style="background-color:green" />
<col style="background-color:orange" />
</colgroup>
<tr>
<th>Emp Id</th>
<th>Emp name</th>
<th>DOB</th>
<th>Address</th>
</tr>
<tr>
<td>001</td>
<td>Palak</td>
<td>08-09-1985</td>
<td>11, Adarsh Nagar</td>
</tr>
</table>Output:

HTML <col> Tag Attributes
This element does not have any specific attributes although this element supports Global attributes and Event attributes.
The main attribute for the <col> tag is the span attribute which is used to define how many columns will the <col> tag cover.
Default CSS style for HTML <col> tag
col
{
display:table-column;
}Browser Support for HTML <col> tag
Following browsers support this attribute:
- Firefox 1+
- Google Chrome 1+
- Internet Explorer 4+
- Apple Safari 1+
- Opera 7+










