Welcome to HTML5-Tutorials

Our site offers a lot of HTML5 learning from absolutely beginning to advanced level.If you want to make a website with HTML,this site will completely guide you a lot.So learn HTML5 syntax and form of coding easily with this website.If you have any doubt,leave a message on us.We will return you so soon.This site includes innumerable number of references you need to do after studying their corresponding elements.

In this page,we will learn about HTML <colgroup> tag.

Overview Content

1 Use of <colgroup> tag
2 Example of <colgroup> tag
3 Supported Browsers
4 Full code Example
5 Attributes of <colgroup> tag
     5.1 align
     5.2 bgcolor
     5.3 char
     5.4 charoff
     5.5 span
     5.6 valign
     5.7 width

Use of <colgroup> tag

The <colgroup> tag defines a group of columns in a table.
It is helpful in giving style for entire columns in a table instead of giving one-by-one.


Some related elements of <colgroup> element:
1. <tr>: It defines a table row.
2. <th>: It defines a table heading.
3. <td>: It defines a table cell.
4. <caption>: It defines a table name.
5. <table>: It defines a HTML table.
6. <col>: It defines a column in table and used in defining the properties of each columns within <colgroup> element.
7. <tbody>: It defines the group of body content of a table.
8. <tfoot>: It defines the group of footer content of a table.
9. <thead>: It defines the group of header content of a table.

Example of <col> tag

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

Supported Browsers.

Tag
<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:red">
<col style="background-color:yellow">
</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>

Attributes of <colgroup> tag

Tag Value Notes
align left
center
right
justify
char
It defines the horizontal alignment of the column-cell content with respect to its cell.
bgcolor rgb(x,x,x)
#xxxxxx
color_name
It defines the background-color of each cell of the column member of the column group.
char character It defines the alignment of the content to a character in a column-group.
charoff pixels It defines the number of characters the content will be aligned from the character specified by the char attribute
span pixels It defines the number of consecutive columns that the column group should span.
valign top
middle
bottom
baseline
It defines the vertical alignment of the cell content of column-group.
width pixels
%
relative_length
It defines the width of a column group.

1. align attribute

Explaination:The align attribute defines the horizontal alignment of the column-cell content with respect to its cell.
The align attribute is not supported in HTML5.Use CSS property - "text-align" like
<td style="text-align:center">

Syntax:

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

Example:

<table>
<colgroup span="2" align="center">
<colgroup align="left">
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> Cruish </td>
<td> 21 </td>
</tr>
<tr>
<td> Taylor </td>
<td> Swift </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
align Not Supported Not Supported Not Supported Not Supported Not Supported
Attribute values
Attribute 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.

2. bgcolor attribute

Explaination:The bgcolor attribute defines the background-color of each cell of the column member of the column group.
This attribute is not supported in HTML5.Use CSS property "background-color" like
<td style="background-color:red">
Click here, to learn more about HTML color.

Syntax:

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

Example:

<table>
<colgroup span="2" bgcolor="red">
<colgroup bgcolor="blue">
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> Cruish </td>
<td> 21 </td>
</tr>
<tr>
<td> Taylor </td>
<td> Swift </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
bgcolor Not Supported Yes Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
colorname 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)").

3. char attribute

Explaination: The char attribute defines the alignment of the content to a character in a column-group. This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<colgroup char="character">

Example:

<table>
<colgroup span="2" align="right">
<colgroup align="char" char=".">
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> Cruish </td>
<td> 21 </td>
</tr>
<tr>
<td> Taylor </td>
<td> Swift </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
char Not Supported Not Supported Not Supported Not Supported Not Supported

4. charoff attribute

Explaination: The charoff attribute defines the number of characters the content will be aligned from the character specified by the char attribute.
This attribute is valid only when the align attribute is set to char.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<colgroup charoff="number">

Example:

<table>
<colgroup align="left">
<colgroup align="char" char="." charoff="2">
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> Cruish </td>
<td> 21 </td>
</tr>
<tr>
<td> Taylor </td>
<td> Swift </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
charoff Not Supported Not Supported Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
positive number It specifies alignment to the right of the character.
negative number It specifies alignment to the left of the character..

5. span attribute

Explaination: The span attribute defines the number of consecutive columns that the column group should span.
If not present, its default value is 1.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<colgroup span="number">

Example:

<table>
<col span="2" style="background-color:red">
<col style="background-color:blue">
<tr>
<th> First name </th>
<th> Last name </th>
<th> Age </th>
</tr>
<tr>
<td> Tom </td>
<td> Cruish </td>
<td> 21 </td>
</tr>
<tr>
<td> Taylor </td>
<td> Swift </td>
<td> 23 </td>
</tr>
</table>

Supported Browsers

Attribute
span Yes Yes Yes Yes Yes

6. valign attribute

Explaination: The valign attribute defines the vertical alignment of the cell content of column-group.
This attribute is not supported in HTML5.Use CSS property "vertical-align" like
<td style="vertical-align:bottom">.

Syntax:

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

Example:

<table>
<colgroup valign="top">
<colgroup valign="bottom">
<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
valign Not Supported Yes Not Supported Not Supported Not Supported
Attribute values
Attribute Notes
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.
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 as much as it can but mainly align to the baseline of the characters
You will notice the difference between bottom and baseline when the font-sizes are of different sizes like Explain

With bottom attribute,Exclaim

With baseline attribute,Exclaim


7. width attribute

Explaination: The width attribute defines the width of a column group.
This attribute is not supported in HTML5.Use CSS property- width like <td style="width:500px">.

Syntax:

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

Example:

<table>
<colgroup width="150">
<colgroup width="100">
<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
width Yes Yes Yes Yes Yes
Attribute values
Attribute Notes
pixels It sets the width of the column in pixels like 100px.
% It sets the width of the column in % like 100%.
relative_length It allows to share the available space into parts.
For example, if you have 30px available of two columns, you can have one"1*" and one "2*" which will interpreted as 10px and 20px.