HTML <col> Tag

The <col> tag offers an easy way to style one or more table columns for all rows in the table. This tag is usually placed inside a <colgroup> element at the top of the table.

HTML Tag

Example

#

Two <col> tags styling the columns in a 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 = column
colgroup = column group

Code Explanation

  • <colgroup> - defines a container for <col> elements
  • <col> - defines one or more columns in the table
  • span - specifies the number of columns the <col> element represents, the default is 1.

Tip: The <col> element is self-closing and does not require an end tag.


Using <col>

The <col> tag is a semantic element that groups table columns.

With <col> you style one or more columns for all rows in the table.

The <col> is usually placed inside a <colgroup> container element.

Attributes for <col>

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.


Obsolete Attributes

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

Table Tags

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, these tags 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

Browser support

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

You may also like

Guides