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

User your email and password to singn in

Don’t have an account, signup here : 

HTML5 & CSS3

Tools and Tutorials

Want a Website

Want a website for your business ?

Please fill out the details below, so we can reach out to you.

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