colgroup tag in html with examples

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

colgroup tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <colgroup> tag is used for specifying properties for a group of columns within a table.
If you need to apply different properties to a column within a colgroup, you can use the <col> tag within the <colgroup> tag.
The <colgroup> tag can only be used inside a <table> element.
The <colgroup> is supported in all major browsers.

Example :

     <html>
     <head>
     <title>ColGroup</title>
     </head>
     <body>
     <table border="1" align="center" width="40%">
     <caption>Employee Details</caption>
     <colgroup span="2" style="background-color:gray;color:silver;">
     </colgroup>
     <colgroup 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 colgroup tag to apply style to specific columns.

ColGroup and Style :

<html>
<head>
<title>ColGroupStyle</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 id="k1" span="2">
</colgroup>
<colgroup 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.