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>

Output

Browser Output

html

A table where the first column has a light red background, and the next two columns have a light green background.
Use our TryIt Editor to see the output

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.

PreviousHTML <col> Tag NextHTML <form> Tag