Summary -

In this topic, we described about the <colgroup> tag along with detailed example.

Used to specify the column group in table. The <colgroup> tag is used to represent a group of columns within a table. The <colgroup> tag is inner element of <table> tag and should be coded immediately after <caption> tag.

The <colgroup> tag specifies the group of one or more columns in a table for formatting. The basic tag can be specified like <colgroup span=""></colgroup>.

The <colgroup> tag is useful for applying styles to entire columns or group of columns. Most of the attributes of <clogroup> tag from HTML 4.01 are not supported in HTML5.

Note! If different properties needs to individual columns within a colgroup, use the <col> tag within the <colgroup> element.

Syntax -

<colgroup>.... HTML text here </colgroup>

Optional Attributes -

AttributeDescriptionValues
align Specifies the <colgroup> content alignment.Not supported in HTML5 leftrightcenterjustifychar
Char Specifies the <colgroup> content alignment to character.Not supported in HTML5 Char
span Specifies the number of columns the col element needs to be applied. Number.
Valign Specifies the <colgroup> content virtual alignment.Not supported in HTML5 BaselineBottomMiddletop
Width Specifies the <colgroup> content width.Not supported in HTML5 Pixels%

Example -

<!DOCTYPE html>
<html>
	<head>
		<title> Code formatting element example.. </title>
	</head>
	<body>
		<table>
			<caption>Employee details</caption>
			<colgroup>
				<col style="background-color:blue">
				<col span="2" style="background-color:green">
			</colgroup>
			<tr>
				<th>EMP name</th>
				<th>Designation</th>
			</tr>
			<tr>
				<td>Pawan</td>
				<td>Lead</td>
			</tr>
		</table>
	</body>
</html>

Output -

Employee details
EMP name Designation Salary
Pawan Lead $2500