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

<table>
  <colgroup>
    <col span="number" style="property:value;">
  </colgroup>
  ...
</table>

Attributes

AttributeValue TypeDescription
spannumberSpecifies how many columns the style applies to (used in <col> tags inside <colgroup>).
styleCSS stylesApplies visual styling to the columns.
class, idglobal attributesFor styling and scripting.

Example

<!DOCTYPE html>
<html>
<body>

<h2>The &lt;colgroup&gt; 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

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
Chrome
Firefox
Firefox
Edge
Edge
Safari
Safari
Opera
Opera
IE
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.

Sign In Form

Use your email and password to sign in

Provide your email and we will send you a password reset link.

Don’t have an account, signup here : 

HTML5 & CSS3

Tools and Tutorials

Registration Form

Signup to track your record and much more.

We have sent you an email with a registration link. Please click the link to verify your email address, or enter the 6-digit OTP provided in the email.

Didn't receive the OTP. Regenerate OTP Resend