<colgroup> - column grouping

The <colgroup> tag in HTML is used to group columns in a table and is typically used in conjunction with the <col> tag. It allows developers to apply uniform styles or attributes to columns in a table without having to set them individually for each cell.

Basic Usage of <colgroup>

The <colgroup> tag must appear as a child element of the <table> element, placed after the <caption> (if present) and before <thead>, <tbody>, or <tr>. A simple example:

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <td>First Column</td>
    <td>Second Column</td>
    <td>Third Column</td>
  </tr>
</table>

In this example, the first two columns are grouped together with a red background, while the third column has a yellow background.

Attributes of <colgroup>

The <colgroup> tag supports the following main attributes:

1. span: Specifies the number of columns in the group.
2. style: Applies CSS styles to all columns in the group.
3. class: Assigns a CSS class to the group.

<table>
  <colgroup span="3" class="important-columns"></colgroup>
  <colgroup>
    <col style="width:100px">
    <col style="width:200px">
  </colgroup>
  <!-- Table content -->
</table>

Working with the <col> Tag

The <colgroup> can contain multiple <col> tags, each representing a column:

<table>
  <colgroup>
    <col span="2" style="background:#f0f0f0">
    <col style="background:#e0e0e0; width:150px">
  </colgroup>
  <tr>
    <td>Data1</td>
    <td>Data2</td>
    <td>Data3</td>
  </tr>
</table>

Practical Use Cases

Uniform Styling for Table Columns

<style>
  .price-column { background: #ffeb3b; text-align: right; }
  .highlight { background: #4caf50; color: white; }
</style>

<table>
  <colgroup>
    <col class="highlight">
    <col>
    <col class="price-column">
  </colgroup>
  <tr>
    <th>Product</th>
    <th>Description</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Phone</td>
    <td>Smartphone</td>
    <td>2999</td>
  </tr>
</table>

Responsive Table Column Control

<style>
  @media (max-width: 600px) {
    colgroup .hide-on-mobile { display: none; }
  }
</style>

<table>
  <colgroup>
    <col>
    <col class="hide-on-mobile">
    <col>
  </colgroup>
  <!-- Table rows -->
</table>

Advanced Techniques

Multi-Level Column Grouping

<table>
  <colgroup span="3" style="background:#f5f5f5"></colgroup>
  <colgroup>
    <col span="2" style="background:#e0f7fa">
    <col style="background:#b2ebf2">
  </colgroup>
  <!-- Table content -->
</table>

Dynamic Manipulation with JavaScript

// Dynamically add a column group
const table = document.querySelector('table');
const colgroup = document.createElement('colgroup');
colgroup.innerHTML = '<col style="width:20%"><col style="width:30%"><col style="width:50%">';
table.insertBefore(colgroup, table.firstChild);

// Modify styles of an existing column group
document.querySelector('colgroup').style.backgroundColor = '#ffcdd2';

Browser Compatibility Notes

While modern browsers support <colgroup>, note the following:

1. Some CSS properties may behave inconsistently on columns, such as border.
2. Column width settings may vary slightly across browsers.
3. Pseudo-class selectors like :hover cannot be directly applied to <col> elements.

<!-- This hover effect won't work -->
<style>
  col:hover { background: red; } /* Invalid */
</style>

Performance Optimization

For large tables, using <colgroup> can significantly improve performance:

<!-- Efficient approach -->
<table>
  <colgroup>
    <col style="width:100px">
    <col style="width:200px">
  </colgroup>
  <!-- Large number of rows -->
</table>

<!-- Inefficient approach -->
<table>
  <tr>
    <td style="width:100px">Data</td>
    <td style="width:200px">Data</td>
  </tr>
  <!-- Repeated rows -->
</table>

Interaction with Other Table Elements

Styles from <colgroup> will combine with cell styles, with later-defined styles taking precedence:

<table>
  <colgroup>
    <col style="background:blue; color:white">
  </colgroup>
  <tr>
    <td style="background:red">Test</td>
  </tr>
</table>

In this example, the cell background will be red (overriding the column's blue background), but the text color remains white (inherited from the column).

Application in Print Styles

<style>
  @media print {
    colgroup .no-print { display: none; }
  }
</style>

<table>
  <colgroup>
    <col>
    <col class="no-print">
  </colgroup>
  <!-- Table content -->
</table>

Enhancing Table Accessibility

While <colgroup> itself doesn't directly impact accessibility, it can be used with ARIA attributes:

<table>
  <colgroup aria-label="Product information columns">
    <col>
    <col>
  </colgroup>
  <!-- Table content -->
</table>

Comparison with CSS Grid and Flexbox

In modern layout techniques, CSS Grid and Flexbox can replace some table functionalities, but for actual tabular data, <colgroup> still has advantages:

<!-- Traditional table approach -->
<table>
  <colgroup>
    <col style="width:30%">
    <col style="width:70%">
  </colgroup>
  <!-- Table content -->
</table>

<!-- CSS Grid approach -->
<div style="display:grid; grid-template-columns:30% 70%">
  <div>Header1</div>
  <div>Header2</div>
  <!-- Data rows -->
</div>