HTML <colgroup> Tag

HTML `<colgroup>` Tag

The <colgroup> tag is meant to group one or more element within an HTML table. Think of it as a container for columns that will help control the style or attributes that affect a set of columns. The tag makes it much easier to work with multiple columns if you want them to have the same styles or settings.

Purpose of the `<colgroup>` Tag

The group of columns used by the <colgroup> tag can be styled in common. By applying a common style or attribute to the columns in the table through the <colgroup> tag, you can manage any number of columns with the same declaration more easily than changing settings for each column individually.

Example:

<table>
  <colgroup>
    <col style="background-color: lightgray;">
    <col style="background-color: lightblue;">
  </colgroup>
  <tr>
    <td>Item 1</td>
    <td>Price</td>
  </tr>
  <tr>
    <td>Item 2</td>
    <td>$5</td>
  </tr>
</table>

In this example, the <colgroup> groups the columns and applies different background colors, making the table visually clearer.

When to Use the `<colgroup>` Tag

You should use the <colgroup> tag when you want to apply the same styling or attributes to multiple columns. This is especially useful when:

You want several columns to have similar styles (e.g., the same background color, width, or font).
You need to set specific properties for a group of columns instead of repeating the same code.

Example:

<table>
  <colgroup>
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
</table>

Here, the <colgroup> tag helps set the width for both columns at once, saving time and ensuring consistency.

What the `<colgroup>` Tag is NOT For

The <colgroup> tag is not meant for grouping table rows or cells. It’s specifically designed for columns. For rows, you should continue using <tr>, <th>, and <td> elements.

Example:

Incorrect:

<colgroup>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
</colgroup>

Correct:

<table>
  <colgroup>
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td>Product</td>
    <td>Price</td>
  </tr>
</table>

Styling the `<colgroup>` Tag

While the <colgroup> tag itself doesn’t display anything, it is commonly used to apply styles to the columns inside it. You can customize the columns by using the <col> element inside the <colgroup>.

Example: Custom Styling

<style>
  colgroup col:first-child {
    background-color: lightyellow;
  }
  colgroup col:last-child {
    background-color: lightgreen;
  }
</style>

<table>
  <colgroup>
    <col>
    <col>
  </colgroup>
  <tr>
    <td>Product 1</td>
    <td>$10</td>
  </tr>
  <tr>
    <td>Product 2</td>
    <td>$15</td>
  </tr>
</table>

In this example, the first column gets a light yellow background, and the second column gets a light green background.

Browser Support

The <colgroup> tag is supported by all modern browsers, so you can use it without worrying about compatibility issues.

Recap

The <colgroup> tag is used to group columns in a table, making it easier to apply common styles or attributes to them.
Use it when you want multiple columns to have the same settings, like width or background color.
It is not for grouping rows or table cells—use <tr>, <th>, and <td> for those.
You can style the columns inside the <colgroup> tag using CSS.

HTML <colgroup> Tag