Definition
The <colgroup> HTML element is used to group and apply styling to a set of columns within an HTML table. It provides a way to define common properties or styles that should be applied to multiple columns simultaneously.
Here’s an example of how to use the <colgroup> element:
<table>
<colgroup>
<col style="background-color: lightblue;" />
<col style="background-color: lightgreen;" />
<col style="background-color: lightpink;" />
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
In this example, the <colgroup> element contains three <col> elements, each with a different background color. The <colgroup> is placed immediately after the opening <table> tag, and the <col> elements define the styling for the corresponding columns.
By grouping columns within a <colgroup>, you can apply common styles or attributes to multiple columns at once. This can include properties like background color, width, alignment, borders, and more.
The <colgroup> element helps improve the organization and maintainability of table styling by allowing you to define column properties in one place. It promotes consistency across multiple columns and provides a way to separate the presentation aspects of the table from its structural markup.
It’s important to note that the <colgroup> element is optional. If you don’t specify a <colgroup>, the table will still function correctly, and the columns will be styled based on default browser settings.