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 <col> tag.

Overview Content

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

Use of <col> tag

The <col> tag defines a column in table and used in defining the properties of each columns within <colgroup> element.
It is helpful in giving style for entire columns in a table instead of giving one-by-one.
Type:Empty

Some related elements of <col> 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. <colgroup>: It defines a group of columns within a table.
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
<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: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 <col> tag

Tag Value Notes
align left
center
right
justify
char
It defines the horizontal alignment of the cell content of each column.
bgcolor rgb(x,x,x)
#xxxxxx
color_name
It defines the background-color of each cell of the column.
char character It defines the alignment of the content to a character in a column.
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 <col> element should span.
valign top
middle
bottom
baseline
It defines the vertical alignment of the cell content of each column.
width pixels
%
relative_length
It defines the width of <col> element.

1. align attribute

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

Syntax:

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

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
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.
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:

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

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
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. 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:

<col char="character">

Example:

<table>
<col align="left">
<col align="char" char=".">
<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
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:

<col charoff="number">

Example:

<table>
<col align="left">
<col align="char" char="." charoff="2">
<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
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 <col> element should span.
If not present, its default value is 1.
This attribute is not supported in HTML5.Use CSS property instead.

Syntax:

<col 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 each column.
This attribute is not supported in HTML5.Use CSS property "vertical-align" like
<td style="vertical-align:bottom">.

Syntax:

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

Example:

<table>
<col valign="top">
<col 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 <col> element.
This attribute is not supported in HTML5.Use CSS property- width like <td style="width:500px">.

Syntax:

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

Example:

<table>
<col width="150">
<col 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.