<colgroup> Tag in HTML

The <colgroup> tag in HTML is used to group one or more columns in a table and to apply common styles to those columns. It helps in improving the readability and maintainability of the HTML structure when working with tables that have multiple columns with similar properties.

Key Points on <colgroup> Tag:

• The <colgroup> tag is used to group columns in a table for styling purposes.
• It is typically used with the <col> tag to define styles such as background colors, width, etc., for specific columns.
• The <colgroup> tag can be used to group all columns or a subset of columns, depending on your styling needs.
• It must be placed immediately after the <table> tag and before any table rows.

Syntax of <colgroup> Tag:

<colgroup>
          <col style="property:value">
          <col style="property:value">
        </colgroup>

Example of <colgroup> Tag in HTML:

This example demonstrates how to use the <colgroup> tag to group columns and apply styles to them.

        <table>
          <colgroup>
            <col style="background-color: blue;">
            <col style="background-color: pink;">
            <col style="background-color: purple;">
          </colgroup>
          <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
            <td>Row 1, Column 3</td>
          </tr>
          <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
            <td>Row 2, Column 3</td>
          </tr>
        </table>
                

The <colgroup> tag is useful when you want to apply common styles or properties (such as background colors or widths) to multiple columns in a table. Instead of applying the styles to each <col> tag individually, you can group them using the <colgroup> tag, making your HTML cleaner and more manageable.