HTML <colgroup> Tag

Concept

The <colgroup> tag in HTML is used to specify properties for one or more columns within a table. It allows you to group columns together and apply styling or other attributes to them collectively. This can be particularly useful when you want to create consistent formatting across multiple columns.

Implementation

Example 1: Grouping Columns with Different Background Colors

You can use the <colgroup> and <col> tags to set the background color of different columns:

<table border="1">
  <colgroup>
    <col style="background-color:yellow">
    <col style="background-color:blue">
    <col style="background-color:red">
  </colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

powered by Advanced iFrame. Get the Pro version on CodeCanyon.

Example 2: Spanning Columns

The <colgroup> tag can also be used with the span attribute to specify the number of columns a group should span:

<table border="1">
  <colgroup span="2" style="background-color:yellow"></colgroup>
  <colgroup style="background-color:blue"></colgroup>
  <tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
  </tr>
</table>

Attributes

• Global Attributes: The <colgroup> tag supports all the global attributes in HTML.
• Event Attributes: The <colgroup> tag also supports all the event attributes in HTML.
• span: Specifies the number of columns a column group should span.

Browser Support

Default CSS Settings

Most browsers will display the <colgroup> element with the following default CSS settings:

colgroup {
  display: table-column-group;
}

Conclusion

The <colgroup> tag offers a convenient way to group and style columns within a table. It enhances the flexibility of table design and ensures consistency across columns.

Whether you’re looking to apply uniform styling or create complex table layouts, the <colgroup> tag can be a valuable tool in your HTML toolkit.