HTML <colgroup> Tag

The <colgroup> tag in HTML is used to define a group of one or more columns in a table for formatting. It's a powerful way to apply styles, width settings, or other attributes to multiple columns at once, making your HTML tables more manageable and easier to style. This tag helps to reduce redundancy in your code and makes it easier to maintain table styles.

Syntax

<colgroup span="number"  align="left|center|right|justify|char" char="character" charoff="length" valign="top|middle|bottom|baseline" width="pixels|percentage|relative"></colgroup>

Attributes

Example

<table border="1">
  <colgroup>
    <col style="background-color:#f0f0f0">
    <col span="2" style="background-color:#e0e0e0">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>30</td>
    <td>New York</td>
  </tr>
  <tr>
    <td>Jane Smith</td>
    <td>25</td>
    <td>London</td>
  </tr>
</table>

More Examples

Basic Grouping:
This example demonstrates how to apply basic styling to a group of columns using <colgroup> and <col>.

<table border="1">
  <colgroup>
    <col style="background-color:#f0f0f0;">
    <col style="background-color:#e0e0e0;">
    <col style="background-color:#d0d0d0;">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
    <tr>
        <td>Laptop</td>
        <td>$1200</td>
        <td>2</td>
    </tr>
  <tr>
    <td>Keyboard</td>
    <td>$100</td>
    <td>5</td>
  </tr>
</table>

In this example, each column has a different background color applied.

Using span attribute
This example demonstrates using span to group multiple columns.

<table border="1">
  <colgroup>
    <col span="2" style="background-color:#f0f0f0;">
      <col style="background-color:#e0e0e0;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
    <tr>
        <td>John Doe</td>
        <td>30</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>25</td>
        <td>London</td>
    </tr>
</table>

Here, the first two columns are grouped together and styled.

Setting Column Widths
You can also use <colgroup> to set column widths:

<table border="1">
  <colgroup>
      <col width="150px">
      <col width="100px">
    </colgroup>
    <tr>
        <th>Product</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>Laptop</td>
        <td>A powerful machine</td>
    </tr>
    <tr>
        <td>Keyboard</td>
        <td>Ergonomic keyboard</td>
    </tr>
</table>

This will make the first column 150px wide and the second 100px wide.

Using Align, Char, and Charoff
This advanced example uses alignment with a specific character. (Note: char and charoff often have inconsistent rendering in browsers, so their usage is less common. align attribute on colgroup is deprecated in HTML5.)

<table border="1">
    <colgroup>
        <col align="char" char="." charoff="2" style="text-align:right;"/>
        <col align="center"/>
    </colgroup>
    <tr>
        <th>Price</th>
        <th>Description</th>
    </tr>
    <tr>
        <td>12.99</td>
        <td>Book</td>
    </tr>
    <tr>
      <td>1234.56</td>
      <td>Laptop</td>
    </tr>
</table>

In this example, the first column attempts to align text around the decimal point, with an offset of 2 pixels. The second column is center aligned. Browser support for char and charoff may vary. Note that align is deprecated and is used here for demonstration only. Use CSS text-align for alignment.

Browser Support

The <colgroup> tag is widely supported across all modern browsers:

Notes and Tips

• The <colgroup> tag must appear immediately after the <table> tag and before any <thead>, <tbody>, <tfoot>, or <tr> tags.
• The <col> tag can be used inside <colgroup> to specify the properties of individual columns, where span attribute can be specified on the col tag too. If not specified then one col per column group is the default behavior.
• The span attribute allows you to target multiple columns with a single <col> tag which can be especially useful for applying the same style to many columns.
• For complex styling and layout, consider using CSS to style table elements instead of relying only on <colgroup> attributes as the align attribute is deprecated.
• Using <colgroup> and <col> helps to create cleaner and more maintainable HTML for tables, especially in scenarios where similar styles need to be applied across multiple columns.
• It's good practice to utilize <colgroup> when the structure of a table implies column-specific formatting or if there is a need to style columns differently from rows.