<colgroup>

colgroup Tag

The <colgroup> element is used in HTML tables to group columns, making it possible to apply styles or attributes to multiple columns simultaneously, improving the table's structure and design.

Syntax

<colgroup>
  <col style="background-color: #f0f0f0; color:blue;">
  <col style="width: 150px;">
  <col>
</colgroup>

colgroup Demo

<table>
  <colgroup>
    <col style="background-color: #f0f0f0; color:blue;">
    <col style="width: 150px;">
    <col>
  </colgroup>
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
  </tbody>
</table>

Example

• The <colgroup> element structures the <col> elements.
• The first column has a specified background color.
• The second column has a fixed width.
• The third column follows default styling.

span

Defines how many columns the <colgroup> covers. It must be a positive integer greater than zero. If not specified, it defaults to 1.

Deprecated Attributes

The following attributes are obsolete and should be avoided in modern code but are listed here for reference when updating legacy code:

• align
• bgcolor
• char
• charoff
• valign
• width

align

Previously used for horizontal alignment of <colgroup> cells, this attribute is no longer supported. Instead, use the CSS text-align property on <td> and <th>.

bgcolor

Used to define the background color of <colgroup> cells using color names or hex codes. This attribute is now deprecated. Instead, apply styles using the background-color CSS property.

char

This obsolete attribute aligned content in <colgroup> cells based on a specific character. It was only relevant when align="char" was set and applied by default to <col> elements.

charoff

Once used to adjust content alignment based on the character defined by char, this attribute is now obsolete and has no effect.

valign

The valign attribute, which controlled vertical alignment (baseline, bottom, middle, top) for <colgroup> cells, is now deprecated. Instead, use the CSS vertical-align property on <td> and <th>.

width

This attribute previously defined column width within a <colgroup>, using values like 0 for content-based widths. It is now deprecated; instead, use the width CSS property on <col>.

Usage Notes

• The <colgroup> element should be placed inside a <table> after any <caption> but before <thead>, <tbody>, <tfoot>, and <tr> elements.

Conclusion

The <colgroup> element in HTML is used to group <col> elements within a table, allowing you to apply consistent styles or attributes to multiple columns at once. The span attribute defines how many columns the <colgroup> covers, with a default value of 1.