HTML Tag: <colgroup>

Purpose:

Group columns of a table to apply common attributes.

Usage:

1. Place the <colgroup> tag within the <table> tag.
2. Use the <col> tag within the <colgroup> tag to define each column.
3. Specify column properties using attributes of the <col> tag.

Attributes of <colgroup>:

• span: Specifies the number of columns in the group.
• width: Sets the width of all columns in the group.

Attributes of <col>:

• span: Specifies the number of columns to merge.
• width: Sets the width of the column.
• align: Aligns the content within the column (left, center, right).
• bgcolor: Sets the background color of the column.

Examples:

Group two columns and set their width:

<table>
  <colgroup span="2" width="50%">
    <col>
    <col>
  </colgroup>
  <tr>
    <td>Col 1</td>
    <td>Col 2</td>
  </tr>
</table>

Align content in a column:

<colgroup>
  <col align="center">
  <col>
</colgroup>

Merge multiple columns:

<colgroup>
  <col span="3">
  <col>
</colgroup>

Exploring the <colgroup> Tag:

HTML Code:

<table>
  <colgroup span="2" width="50%">
    <col>
    <col>
  </colgroup>
  <tr>
    <th>Col 1</th>
    <th>Col 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Result:

Creates a table with two groups of columns, where each group has a width of 50%.