HTML Colgroup Tag

The <colgroup> tag in HTML is used inside a table to group one or more columns together. This group can then be styled all at once — for example, you can give all columns in the group the same width, background color, or border style.

This is very useful when you're working with big tables and don’t want to write styles for each individual column separately. Instead of repeating styles over and over, you just define them once in the <colgroup> and HTML does the rest.

Syntax -
<table>
  <colgroup>
    <col span="2" style="background-color: lightgray;">
  
  <!-- rest of the table -->
</table>

<colgroup> wraps the column grouping. <col> represents each column (or set of columns using span).

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 -

Scenario - Example Using <colgroup> Tag

<!DOCTYPE html>
<html>
	<head>
		<title> Code formatting element example.. </title>
	</head>
	<body>
		<table>
			<caption>Employee details</caption>
			<colgroup>
				<col style="background-color: #f2f2f2;">
				<col span="2" style="background-color: #d1e7dd;">
			</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
Explaining Example -

In this case,

  • The first column (ID) has a light gray background.
  • The next two columns (Name and Department) have a light green shade.
  • All of this is controlled using <colgroup> instead of adding style inside every <td> or <th>.