The <col> tag is a semantic element that groups table columns.
With <col> columns are styled that then apply to all rows in the table.
This tag is commonly placed inside a <colgroup> container element.
Two <col> tags specify the background colors for the entire table.
| Id | First Name | Last Name | Country |
|---|---|---|---|
| ART-303 | Vincent | Van Gogh | Netherlands |
| ART-877 | Paul | Cézanne | France |
<style>
table.tb { width:100%; border-collapse: collapse; }
.tb th, .tb td { padding:3px; border: 1px solid #777; }
</style>
<table class="tb">
<colgroup>
<col style="background-color:lightblue;">
<col span="3" style="background-color:aliceblue;">
</colgroup>
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Country</th>
</tr>
<tr>
<td>ART-303</td>
<td>Vincent</td>
<td>Van Gogh</td>
<td>Netherlands</td>
</tr>
<tr>
<td>ART-877</td>
<td>Paul</td>
<td>Cézanne</td>
<td>France</td>
</tr>
</table>
col = columncolgroup = column group
<col> elements<col> - defines one or more columns in the table<col> element represents, the default is 1.Tip: The <col> element is self-closing and does not require an end tag.
These are the attributes for the <col> tag.
| Attribute | Value | Description |
|---|---|---|
| span | number | Number of columns a <col> element will cover. Default is 1. |
| id | identifier | Defines a unique identifier for the col element. |
| class | classnames | Sets one or more CSS classes to be applied to the col element. |
| style | CSS-styles | Sets the style for the col element. |
| data-* | value | Defines additional data that can be used by JavaScript. |
For addional global attributes see our global attributes list.
Do not use the attributes listed below. They are no longer valid on colgroup tag in HTML5.
| Attribute | Description | Alternative |
|---|---|---|
align |
Aligns the content in each column cell. | CSS text-align |
bgcolor |
Defines the background color for each column cell. | CSS background-color |
char |
Aligns content to a character, for example "," or ".". | CSS text-align |
charoff |
Shifts column data to the right relative to char attribute. | CSS text-align |
valign |
Sets the vertical alignment of content in each column cell. | CSS vertical-align |
width |
Specifies the width of each column cell. | CSS width |
The <col> tag is part of a group of tags
that are used to create HTML tables.
This group is referred to as the Table tag group.
Together, they allow you to create comprehensive HTML tables.
Here is a list of table tags
| Element | Description |
|---|---|
| <table> | Creates a table that contains elements listed below |
| <caption> | Creates a caption above or under a table |
| <colgroup> | Creates a container for col elements |
| <col> | Creates a style for one or more columns in a table |
| <thead> | Creates a table header that can style all header cells |
| <tbody> | Creates a table body that can style all data cells |
| <tfoot> | Creates table footer that can style all footer cells |
| <tr> | Creates a table row that contains table cells |
| <th> | Creates a table header cell |
| <td> | Creates a table data cell |
Here is when <col> support started for each browser:
 Chrome
|
1.0 | Sep 2008 |
 Firefox
|
1.0 | Sep 2002 |
 IE/Edge
|
1.0 | Aug 1995 |
 Opera
|
1.0 | Jan 2006 |
 Safari
|
1.0 | Jan 2003 |
