HTML <colgroup> Element

Publish in HTML Tutorial el 23/05/2025 22:38

The <colgroup> element in HTML is used to group columns within a table for styling or formatting purposes. It serves as a container for one or more <col> elements, which define column properties. This element allows you to apply styles or attributes to entire columns without repeating the same rules for each cell.

Key features of <colgroup>:

Must appear after the <caption> element (if present) and before any table content
Can span multiple columns using the span attribute
Supports styling through CSS or HTML attributes
Improves table rendering performance by applying styles at column level

Basic Syntax

Examples

Example 1: Basic Column Styling

This example shows how to apply different background colors to table columns.

Play Code

<table border="1">
  <colgroup>
    <col style="background-color: #ffcccc">
    <col style="background-color: #ccffcc">
    <col style="background-color: #ccccff">
  </colgroup>
  <tr>
    <td>Red Column</td>
    <td>Green Column</td>
    <td>Blue Column</td>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

Example 2: Column Spanning

This example demonstrates how to use the span attribute to apply styles to multiple columns.

Play Code

<table border="1">
  <colgroup>
    <col span="2" style="background-color: #f0f0f0">
    <col style="background-color: #e6f7ff">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Status</th>
  </tr>
  <tr>
    <td>John Doe</td>
    <td>john@example.com</td>
    <td>Active</td>
  </tr>
</table>

Example 3: Column Width Control

This example shows how to set different widths for table columns.

Play Code

<table border="1" style="width: 100%">
  <colgroup>
    <col style="width: 20%">
    <col style="width: 50%">
    <col style="width: 30%">
  </colgroup>
  <tr>
    <td>Narrow</td>
    <td>Wide Column</td>
    <td>Medium</td>
  </tr>
  <tr>
    <td>Short</td>
    <td>This column takes up half of the table width</td>
    <td>Regular</td>
  </tr>
</table>

Example 4: JavaScript Column Highlight

This example uses JavaScript to highlight a column when hovered.

Play Code

<table border="1" id="highlightTable">
  <colgroup>
    <col id="col1">
    <col id="col2">
    <col id="col3">
  </colgroup>
  <tr>
    <td>Hover me</td>
    <td>Hover me</td>
    <td>Hover me</td>
  </tr>
  <tr>
    <td>Data A</td>
    <td>Data B</td>
    <td>Data C</td>
  </tr>
</table>
<script>
  const table = document.getElementById('highlightTable');
  const rows = table.rows;

  for (let colIndex = 0; colIndex < 3; colIndex++) {
    for (let row of rows) {
      let cell = row.cells[colIndex];
      cell.addEventListener('mouseover', function () {
        for (let r of rows) {
          r.cells[colIndex].style.backgroundColor = '#ffff99';
        }
      });
      cell.addEventListener('mouseout', function () {
        for (let r of rows) {
          r.cells[colIndex].style.backgroundColor = '';
        }
      });
    }
  }
</script>

Example 5: Dynamic Column Styling

This example uses JavaScript to dynamically change column styles.

Play Code

<table border="1" id="dynamicTable">
  <colgroup>
    <col id="dynCol1">
    <col id="dynCol2">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
  </tr>
</table>
<button onclick="toggleStyle()">Toggle Style</button>
<script>
  function toggleStyle() {
    const col1 = document.getElementById('dynCol1');
    const col2 = document.getElementById('dynCol2');
    
    if(col1.style.backgroundColor !== 'lightpink') {
      col1.style.backgroundColor = 'lightpink';
      col2.style.backgroundColor = 'lightgreen';
    } else {
      col1.style.backgroundColor = '';
      col2.style.backgroundColor = '';
    }
  }
</script>

Tips and Tricks

Use <colgroup> for consistent column styling rather than styling individual cells
Combine with CSS classes for more maintainable code
Remember that <colgroup> only affects visual presentation, not table structure
For complex tables, consider using multiple <colgroup> elements
Use JavaScript with <colgroup> to create interactive column features

Browser Compatibility

The <colgroup> element is supported by all modern browsers, including Chrome, Firefox, Safari, Edge, and Opera. It has been part of HTML since HTML 3.2.