Description
HTML element <colgroup> is used to group the <col> elements of a table, which are used to define styles to one or more columns.
The element <colgroup> must be defined only within the <table> element, after the <caption> element if exist, and before all other table child elements that include <thead>, <tbody>, <tfoot>, <tr>,<th>, and <td>.
The below table summarizes its usage.
| Usage Details | |
| Placement | It is a child element of <table> element. |
| Contents | It can contain one or more <col> elements. |
| Tags | Both opening and closing tags are required. |
| Versions | HTML 4, 4.01, and 5 |
Syntax
Here is the basic syntax of the <colgroup> element.
<colgroup>...</colgroup>Examples
In the below example, the <colgroup> element to group two <col> elements.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h1>HTML Element - colgroup</h1>
<table>
<colgroup>
<col style="background-color: gray;">
<col span="2" style="background-color: blue;">
</colgroup>
<tr>
<th>Product</th>
<th>Sales</th>
<th>Stock</th>
</tr>
<tr>
<th>Bread</th>
<th>10000</th>
<th>20000</th>
</tr>
<tr>
<th>Butter</th>
<th>3000</th>
<th>8000</th>
</tr>
</table>
</body>
</html>Attributes
The following table shows the list of supported and unsupported attributes for the <colgroup> tag.
| Attribute Type | Details |
| Element-Specific Attributes | The tag <colgroup> doesn't have any element-specific attributes. |
| Global Attributes | Like all other HTML tags, the tag <colgroup> supports the HTML Global Attributes. |
| Event Attributes | The tag <colgroup> also supports the HTML Event Attributes. |
Browser Compatibility
The tag <colgroup> is supported in all modern browsers.
- Google Chrome 1+
- Internet Explorer or Edge 4+
- Firefox 1+
- Apple Safari 1+
- Opera 7+