❮ Previous Next ❯

HTML <colgroup> tag

The <colgroup> tag defines a group of columns in an HTML table. It is helpful in giving styles (like background-color, width, etc.) to entire columns instead of giving one-by-one.

Type: Table display cells

Some related tags of <colgroup> 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.
<col>: It defines a column in 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 <colgroup> 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
<colgroup>	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 <colgroup> 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

<colgroup align="left | center | right | justify | char">
</colgroup>

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 (Obsolete)

<table>
 <colgroup span="2" align="center">
 </colgroup>
 <colgroup align="left">
 </colgroup>
  <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 columns. 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

<colgroup bgcolor="color_name | hex_number | rgb_number">
</colgroup>

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)").

Modern Replacement (Valid)

<table>
 <colgroup>
  <col style="background-color: grey;">
 </colgroup>
  <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>

Run The code »

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

<colgroup char="." align="char">
</colgroup>

Full code example

<table>

<colgroup char="." align="char">
</colgroup>

  <tr>
   <th>Price</th>
  </tr>
  <tr>
   <td> 12.5 </td>
   <td> 3.165 </td>
  </tr>
</table>

Numbers (Prices) will align at the decimal point.

Run The code »

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 is used. It is not supported in HTML5. Use CSS property instead - text-align like
<td style = "text-align: right">

Syntax

<colgroup align="char" char="." charoff="12">
</colgroup>

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 (Obsolete)

<table>
  <colgroup char="." charoff="12" align="char">
  </colgroup>
  <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 <colgroup> element should cover. It is basically count from the left column. If not defined, its default value is 1.

Syntax

<colgroup span="number">
</colgroup

Full code example (Obsolete)

<table>

 <colgroup span="2" style="background-color:#d3d3d3">
 </colgroup>
 
 <colgroup 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 of grouped column. It is used in older HTML to align the content of a column which is now replaced by CSS.

Syntax

<colgroup valign="top | middle | bottom | baseline">
</colgroup>

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 align="top">
    </colgroup>
    
    <colgroup align="middle">
    </colgroup>
    
    <colgroup align="bottom">
    </colgroup>
    
    <colgroup 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 valign attribute obsolete in modern HTML. Most modern browsers don't support it.

7. width attribute

The width attribute defines the width of a column group. It is used in older HTML to display layout of a column group 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
<colgroup>	Width of a column group
<col>	Width of a column
<th>or<td>	Width of a cell

Syntax

<colgroup width="pixels | % | relative_length">
</colgroup>

Value	Define
pixels	Width of a column group in pixels like 100px. Fixed width.
%	Width of a column group 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 width="150">
 </colgroup>
 
 <colgroup width="100">
 </colgroup>
 
  <tr>
   <th> Col 1 </th>
   <th> Col 2 </th>
  </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>
<colgroup>
 <col>
 <col>
</colgroup>
 <tr>
  <td> Col 1 </td>
  <td> Col 2 </td>
 </tr>
 <tr>
  <td> A </td>
  <td> B </td>
 </tr>
</table>
</style>

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

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML <colgroup> tag

Some related tags of <colgroup> element:

Example of <colgroup> tag

Supported Browsers

Full code example

Attributes of <colgroup> 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