Colgroup Tag in HTML5
In this article I am going to describe about the implementation and use of Colgroup Tag in HTML5.
Colgroup Tag
The <colgroup> tag is used to gather more than two columns in the table. This tag is used to do easy formatting of columns rather than changing the style of each cell one by one. This tag is used after <caption> tag and within <table> tag only. The <colgroup> tag can contain legal no. of column <col> tag only. This tag is used when we want same style for the columns.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Syntax
<colgroup span="value"></colgroup>
Browser Support
<colgroup> tag is supported in all major browsers.
Attribute
| Attribute |
Value |
Description |
| span |
number |
specifies the number of column the column group should span. |
Most of the attribute of HTML4.01 are not supported in HTML5.Other attributes like width, align, char, valign are not supported by HTML5.
The value of "span" attribute is an integer no i.e. no of columns to be grouped which must be a valid no.
Example of colgroup Tag in HTML5
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Colgroup in HTML5</title>
<table>
<colgroup>
<col span="2" style="background-color: red" />
<col style="background-color: yellow" />
<col style="background-color: pink" />
</colgroup>
<tr>
<th>Id </th>
<th>Name</th>
<th>Salary</th>
<th>Job</th>
</tr>
<tr>
<td>101</td>
<td>Ashwani</td>
<td>$1000</td>
<td>Software Developer</td>
</tr>
<tr>
<td>102</td>
<td>Rahul</td>
<td>$2000</td>
<td>Manager</td>
</tr>
<tr>
<td>103</td>
<td>Sachin</td>
<td>$1500</td>
<td>Engineer</td>
</tr>
</table>
</head>
<body>
<p>ColGroup in HTML5</p>
</body>
</html>
Output
