HTML Tags
HTML <colgroup> Tag
The
<colgroup>tag in HTML is used to group one or more columns in a table for formatting purposes.
It allows you to apply common styles or attributes to a group of columns, making it easier to maintain a consistent design.
Syntax
html
<table>
<colgroup>
<col span="number" style="property:value;">
</colgroup>
...
</table>Attributes
| Attribute | Value Type | Description |
|---|---|---|
| span | number | Specifies how many columns the style applies to (used in <col> tags inside <colgroup>). |
| style | CSS styles | Applies visual styling to the columns. |
| class, id | global attributes | For styling and scripting. |
Example
html
<!DOCTYPE html>
<html>
<body>
<h2>The <colgroup> Tag Example</h2>
<table border="1">
<colgroup>
<col span="1" style="background-color: #ffdddd;">
<col span="2" style="background-color: #ddffdd;">
</colgroup>
<tr>
<th>Item</th>
<th>Price</th>
<th>Availability</th>
</tr>
<tr>
<td>Laptop</td>
<td>$1200</td>
<td>In Stock</td>
</tr>
<tr>
<td>Tablet</td>
<td>$500</td>
<td>Out of Stock</td>
</tr>
</table>
</body>
</html>Browser Support
Chrome | Edge | Firefox | Safari | Opera | IE9+ |
|---|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes | Yes |
The <colgroup> element is always placed inside the <table> element, but before <thead>, <tbody>, and <tfoot> elements.
Notes
- The
<colgroup>element must appear immediately after the<caption>element (if present) and before<thead>,<tbody>, and<tfoot>. - You can use multiple
<col>elements inside<colgroup>to style specific columns. - If you do not include
<col>elements inside<colgroup>, you can still apply styles directly to<colgroup>. - The
<colgroup>tag cannot contain any text content - only<col>tags.
Conclusion
The <colgroup> tag is a powerful and efficient way to apply collective styling or width control to columns in a table.
It enhances readability and maintainability, especially for large tables with consistent column formatting.