col tag in html with examples

Home » HTML » HTML Tags » col tag in html with examples

col tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <col> tag is used for specifying column properties for each column within a colgroup.
You would normally only use this tag if the values for each column is different. Otherwise, you can specify the properties as part of the colgroup tag.
The <col> tag can only be used inside a <table> or a <colgroup> element. Add the style attribute to the <col> tag, and let CSS take care ofbackgrounds, width and borders.
The <col> is supported in all major browsers.

Example :

     <html>
     <head>
     <title>COL</title>
     </head>
     <body>
     <table border="1" align="center" width="40%">
     <caption>Employee Details</caption>
     <colgroup>
     <col span="2" style="background-color:gray;color:silver;">
     <col style="background-color:orange;color:red;">
     </colgroup>
     <tr>
     <th>EmpId</th>
     <th>Name</th>
     <th>Department</th>
     </tr>
     <tr>
     <td>1001</td>
     <td>hitesh</td>
     <td>Testing</td>
     </tr>
     <tr>
     <td>1002</td>
     <td>Sahil</td>
     <td>DBA</td>
     </tr>
     </table>
     </body>
     </html>

Demo :

In the above example, we have used col tag to apply style to specific columns.

Col and Style :

<html>
<head>
<title>ColStyle</title>
<style type="text/css">
#k1
{
background-color:skyblue;
color:blue;
}
#k2
{
background-color:yellow;
color:red;
}
</style>
</head>
<body>
<table border="1" align="center" width="40%">
<caption>Employee Details</caption>
<colgroup>
<col id="k1" span="2">
<col id="k2">
</colgroup>
<tr>
<th>EmpId</th>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>1001</td>
<td>hitesh</td>
<td>Testing</td>
</tr>
<tr>
<td>1002</td>
<td>Sahil</td>
<td>DBA</td>
</tr>
</table>
</body>
</html>

Demo :

In the above example, we have created two style classes and assigned to table columns using id selector.