❮ Previous Next ❯

HTML <col> tag

The <col> tag defines a column in an HTML table, and it is used in defining the properties of each column within the <colgroup> element. It is helpful for styling the entire columns in a table instead of styling one-by-one.

Type: Empty Element

Some related tags of <col> element:

<tr> It defines an HTML table row.
<th>: It defines an HTML table heading.
<td>: It defines an HTML table cell.
<caption>: It defines an HTML table name.
<table>: It defines an HTML table.
<colgroup>: It defines a group of columns within an HTML table.
<tbody>: It defines the group of body content of an HTML table.
<tfoot>: It defines the group of footer content of an HTML table.
<thead>: It defines the group of header content of an HTML table.

Example of <col> tag

<colgroup>
 <col span="2" style="background-color:red">
 <col style="background-color:yellow">
</colgroup>

Supported Browsers

Tag	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
<col>	Yes	Yes	Yes	Yes	Yes

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid blue;
}
td {
text-align: center;
}
</style>
</head>
<body>
<table>
 <colgroup>
  <col span="2" style="background-color:#dcdcdc">
  <col style="background-color:#feffea">
 </colgroup>
 <tr>
  <th> First Name </th>
  <th> Second Name </th>
  <th> Age </th>
 </tr>
 <tr>
  <td> Tom </td>
  <td> Cruise </td>
  <td> 21 </td>
 </tr>
 <tr>
  <td> Raj </td>
  <td> Mohan </td>
  <td> 23 </td>
 </tr>
 <tr>
  <td> Bruce </td>
  <td> Lee </td>
  <td> 22 </td>
 </tr>
</table>
</body>
</html>

Run The code »

Output on the browser



  
    
    
  

  
    First Name
    Second Name
    Age
  

  
    Tom
    Cruise
    21
  

  
    Raj
    Mohan
    23
  

  
    Bruce
    Lee
    22

First Name	Second Name	Age
Tom	Cruise	21
Raj	Mohan	23
Bruce	Lee	22

Attributes of <col> tag

align
bgcolor
char
charoff
span
valign
width

1. align attribute

The align attribute defines the horizontal alignment of the cell content of each column. It is not supported in HTML5. For practical doing, make sure to define in HTML 4.01 Transitional Standard. Use CSS property - "text-align" like <td style = "text-align: center">

Syntax

<col align="left | center | right | justify | char">

Attribute values

Value	Notes
left	It defines left alignment content.
center	It defines center alignment content.
right	It defines right alignment content.
justify	It defines equal lines in length.
character	It defines content alignment to a specific character.

Full code example

<table>
 <col align="left">
 <col align="right">
  <tr>
   <th> Name </th>
   <th> Age </th>
  </tr>
  <tr>
   <td> Tom </td>
   <td> 21 </td>
  </tr>
  <tr>
   <td> Raj </td>
   <td> 23 </td>
  </tr>
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
align	No	No	No	No	No

2. bgcolor attribute

The bgcolor attribute defines the background-color of each cell of the column. It is obsolete in HTML5. For demonstration, make sure to define in HTML 4.01 Transition Standard. Use CSS property instead - "background-color" like <td style = "background-color: #f3f3f3">

Syntax

<col bgcolor="color_name | hex_number | rgb_number">

Attribute values

Value	Notes
color_name	It defines the background-color with a color name like red, green etc.
hex_number	It defines the background color with a hex code (like "#ff0700").
rgb_number	It defines the background color with a rgb code (like "rgb(255,255,255)").

Full code example

<table>
 <col bgcolor="red">
 <col bgcolor="blue">
  <tr>
   <th> Name </th>
   <th> Age </th>
  </tr>
  <tr>
   <td> Tom </td>
   <td> 21 </td>
  </tr>
  <tr>
   <td> Raj </td>
   <td> 23 </td>
  </tr>
</table>

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
bgcolor	No	Yes	No	No	No

3. char attribute

The char attribute defines the alignment of the content to a character in a table column. This attribute is valid only when the align attribute is set to char value. It is not supported in HTML5. Use CSS property instead - "text-align" like <td style = "text-align: right">

Syntax

<col align="char" char="character">

Full code example

<table>
 <col align="char" char=".">
  <tr>
   <td> 12.5 </td>
   <td> 3.165 </td>
  </tr>
</table>

Numbers will align at the decimal point.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
char	No	No	No	No	No

4. charoff attribute

The charoff attribute defines the horizontal distance (mostly prefer in the number of pixels) of the alignment character specified by the char attribute. This attribute is valid only when the align attribute. It is not supported in HTML5. Use CSS property instead - "text-align" like <td style = "text-align: right">

Syntax

<col align="char" char="." charoff="12">

In the above syntax, align="char" enables alignment based on the character.
char="." defines the characters are aligned based on the decimal (.).
charoff="12" means the decimal (.) is positioned 12 pixel from the left edge of the column.

Attribute values

Attribute values can be either negative or positive.

Value	Note
positive number	It defines the numbers of pixels positioned from the left of the column.
negative number	It defines the numbers of pixels positioned from the right of the column.

Full code example

<table>
 <col align="char" char="." charoff="12">
  <tr>
   <td> 12.5 </td>
   <td> 3.165 </td>
  </tr>
</table>

The above example means that the two numbers are aligned based on the decimal (.) and the decimal is positioned 12 pixels from the left side of the column.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
charoff	No	No	No	No	No

Decimal alignment using CSS

<style>
 td {
  text-align:right;
  font-variant-numeric:tabular-nums;
 }
</style>

5. span attribute

The span attribute specifies the number of consecutive columns that a <col> or <colgroup> element should cover. It is basically count from the left column. If not defined, its default value is 1.

Syntax

<col span="number">

Full code example

<table>
<colgroup>
 <col span="2" style="background-color:#d3d3d3">
 <col span="2" style="background-color:#add8e6">
</colgroup>
  <tr>
   <td> Col 1 </td>
   <td> Col 2 </td>
   <td> Col 3 </td>
   <td> Col 4 </td>
  </tr>
  <tr>
   <td> A </td>
   <td> B </td>
   <td> C </td>
   <td> D </td>
  </tr>
</table>

Output on the browser

Col 1	Col 2	Col 3	Col 4
A	B	C	D

By default, <table> element has no border.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
span	Yes	Yes	Yes	Yes	Yes

Column styling using CSS

CSS selectors can replace the use of span attribute.
For <table class="demo-table">

<style>
.demo-table td:nth-child(1), 
.demo-table td:nth-child(3) { 
   background-color:#d3d3d3;
}
.demo-table td:nth-child(2), 
.demo-table td:nth-child(4) {
   background-color:#add8e6; 
}
</style>

span attribute has some limitations:- It can't style random column, it applies only to the consecutive columns only; it is not longer used in HTML 5.

6. valign attribute

The valign attribute defines the vertical alignment of the cell content in a column. It is used in older HTML to align the content of a column which is now replaced by CSS.

Syntax

<col valign="top | middle | bottom | baseline">

Value	Note
top	It puts the text to the top of the cell as much as it can.
middle	It puts the text to the center of the cell. It preserves both horizontal and vertical alignment.
bottom	It puts the text to the bottom of the cell as much as it can.
baseline	It also puts the text to the bottom of the cell but mainly align to the baseline of the characters.

Top	Bottom
Middle	Baseline

You will notice the difference between baseline and other valign attribute's values when the font-sizes are of different size.

With top value, Demo

With bottom value, Demo

With middle value, Demo

With baseline value, Demo

Full code example (Old)

<table border="1">
  <colgroup>
    <col align="top">
    <col align="middle">
    <col align="bottom">
    <col align="baseline">
  </colgroup>

  <tr>
    <td>Top</td>
    <td>Middle</td>
    <td>Bottom</td>
    <td>Baseline</td>
  </tr>
  
</table>

Always remember valign attribute only preserves vertical alignment. For horizontal alignment use the CSS property- text-align.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
valign	No	Yes	No	No	No

Column align using CSS (modern and valid)

CSS property - vertical-align can replace the use of valign attribute.

<table>
<tr style="height:80px;">
 <td style="vertical-align:top;">
      Top
 </td>
 <td style="vertical-align:bottom;">
      Bottom
 </td>
</tr>
<tr style="height:80px;">
 <td style="vertical-align:middle;">
      Middle
 </td>
 <td style="vertical-align:basline;">
      Baseline
 </td>
</tr>
</table>

Even the width attribute obsolete in modern HTML. Most modern browsers don't support it.

7. width attribute

The width attribute defines the width of <col>element. It is used in older HTML to display layout of each table column which is now replaced by CSS.

The width attribute in an HTML table can be used to define in the following ways

Tag	Define
<table>	Width of the table
<col>	Width of a column
<th>or<td>	Width of a cell

Syntax

<col width="pixels | % | relative_length">

Value	Define
pixels	Width of a column in pixels like 100px. Fixed width.
%	Width of a column in % like 100%. Relative to table.
relative length	Shares the available space into parts. For example, if you have 30px available of two column, you can have one "1" and one "2" which will interpreted as 10px and 20px (proportional share).

Full code example (Old)

<table width="250">
<colgroup>
 <col width="150">
 <col width="100">
</colgroup>
  <tr>
   <td> Col 1 </td>
   <td> Col 2 </td>
  </tr>
  <tr>
   <td> A </td>
   <td> B </td>
  </tr>
</table>

Giving percentage value to the width attribute is relative to the table width, not on the page width.

Supported Browsers

Attribute	Chrome	Internet Explorer	Firefox	Safari	Opera Mini
width	Yes	Yes	Yes	Yes	Yes

Column width using CSS

CSS selectors can replace the use of width attribute.

<style>
table { width:250px; }
col:nth-child(1) { width:150px; }
col:nth-child(2) { width:100px; }
</style>
<table>
 <tr>
  <td> Col 1 </td>
  <td> Col 2 </td>
 </tr>
 <tr>
  <td> A </td>
  <td> B </td>
 </tr>
</table>

Even the width attribute is obsolete in modern HTML. Mostly, modern browsers don't support it.

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML <col> tag

Some related tags of <col> element:

Example of <col> tag

Supported Browsers

Full code example

Attributes of <col> tag

1. align attribute

Supported Browsers

2. bgcolor attribute

Supported Browsers

3. char attribute

Supported Browsers

4. charoff attribute

Attribute values

Supported Browsers

Decimal alignment using CSS

5. span attribute

Supported Browsers

Column styling using CSS

6. valign attribute

Supported Browsers

Column align using CSS (modern and valid)

7. width attribute

Supported Browsers

Column width using CSS