HTML Reference Manual

HTML Tag Directory

HTML: <colgroup> Tag

The <colgroup> tag is used to define a group of columns within a table, allowing you to apply formatting or add classes to the group instead of each individual cell. This tag is also commonly referred to as the <colgroup> element.

Online Example

<colgroup> and <col> tags set the background color for four columns in the table:

Example

!doctype　html>
<html>
<head>
<meta　charset="UTF-8">
<title>HTML5　colgroup tag usage (Basic Tutorial Website　oldtoolbag.com)</title>
</head>
<body>
<table>
　　<colgroup>
　　　　<col　span="3"　style="background-color:#FFF9C4">
　　　　<col　style="background-color:yellow;">
　　</colgroup>
　　<thead>
　　　　<tr>
　　　　　　<th>Item</th>
　　　　　　<th>Quantity</th>
　　　　　　<th>Price</th>
　　　　　　<th>Total</th>
　　　　</tr>
　　</thead>
　　<tbody>
　　　　<tr>
　　　　　　<td>Bananas</td>
　　　　　　<td>5</td>
　　　　　　<td>$12</td>
　　　　　　<td>$60</td>
　　　　</tr>
　　</tbody>
</table>
</body>
</html>

Test to see ‹/›

　In this HTML5In the document example, we created a table with <colgroup>, <thead>, and <tbody> sections. In the <colgroup> section, we used two <col> tags. The first <col> tag groups the first three columns and sets the background color of these columns to #FFF9C4The second <col> tag groups the fourth column and sets its background color to yellow.

Browser Compatibility

IEFirefoxOperaChromeSafari

All mainstream browsers support the <colgroup> tag.

Definition and Usage Description

The HTML <colgroup> element is located within the HTML table inside the <body> tag.

The <colgroup> tag is used to group columns in a table for formatting.
The <colgroup> tag must appear after the <caption> in the table, but before the <thead>, <tr>, <th>, <tbody>, and <tfoot> tags.

By using the <colgroup> tag, you can apply styles to the entire column without the need to set styles for each cell or each row repeatedly.

Tip:If you want to define different attributes for a specific column within <colgroup>, use <col> tags.

HTML 4.01 with HTML5differences

HTML5 No longer supports HTML 4.01 Most of the attributes in

Attribute

Attribute	Value	Description
align	left 　right 　center 　justify 　char	HTML5 Not supported. Defines the horizontal alignment of the content within the column group.
char	character	HTML5 Not supported. Defines which character to align the content of the column group by.
charoff	number	HTML5 Not supported. Defines the offset of the first aligned character.
span	number	Specifies the number of columns that the column group should span.
valign	top 　middle 　bottom 　baseline	HTML5 Not supported. Defines the vertical alignment of the content within the column group.
width	pixels % relative_length	HTML5 Not supported. Defines the width of the column group.

Global attributes

Support for <colgroup> tag HTML global attributes.

Event attributes

Support for <colgroup> tag HTML event attributes.

HTML: <command> Tag HTML: <col> Tag