HTML Table Colgroup

<colgroup> is an HTML element used to group a set of columns in an HTML table. It allows you to apply properties to multiple columns simultaneously.

Basic Usage

<table>
  <colgroup>
    <col style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
    <col style="background-color: lightyellow;">
  </colgroup>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Applying Attributes to Columns

You can use attributes within the <col> tags to apply properties to the columns.

<table>
  <colgroup>
    <col span="2" style="background-color: lightblue;">
    <col style="background-color: lightgreen;">
  </colgroup>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

Specifying Column Widths

You can also specify the width of each column using the width attribute.

<table>
  <colgroup>
    <col style="width: 100px;">
    <col style="width: 200px;">
    <col style="width: 150px;">
  </colgroup>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    <td>Cell 3</td>
  </tr>
  <tr>
    <td>Cell 4</td>
    <td>Cell 5</td>
    <td>Cell 6</td>
  </tr>
</table>

 

Summary

<colgroup> in HTML is used to group columns in a table, allowing you to apply properties such as width or background color to multiple columns simultaneously. This element provides a convenient way to manage the styling of columns within a table.