HTML Table Colgroup

HTML Table Colgroup facilitates to select the specific column or group of columns in a Table. It is mainly used for formatting or styling purposes. The combination of the <colgroup> and <col> elements can be used to style the first columns of a table, where the <colgroup> Element must be utilized as the container to specify the column.

We can provide only a few CSS styles to the Colgroup including width, visibility, background, and border. Other CSS styles are not applied to the <colgroup> element.

Note: The element <colgroup> must defined after table <caption> and before <tr>, <td>, <thead>, etc.

HTML Table colgroup

With the <colgroup> and <col> elements, the first two columns of the table are grouped. For styling with a specific background colour to the <col> element.

Example: Illustrating the styling of first two columns.

Output:

Valid Colgroup CSS Properties

Only a few CSS properties, such as width, visibility, background color, and border, can be used for styling purposes with the colgroup and <col> elements.

Example: Implementation to show the valid properties width and background color for styling to the group of columns.

Output:

Multiple Col Elements

Use multiple <col> elements to create separate groups of columns wrapped inside HTML Table <colgroup> and apply distinct styles to each group of columns. Here, we have grouped the first two columns to give a shade of green, while the next two columns have a shade of blue.

Example: The example shows the distinct styles to each group of columns.

Output:

Empty Colgroups

To style the second group of column, define an empty <colgroup> (without styling) first. Create multiple groups using <col> elements, then apply styles to the desired group, such as the second group of column.

Example: The example shows how to make Empty Colgroups, the first two columns are empty and the middle two have style.

Output:

Hide Columns

Set the property visibility to collapse to hide one or group of columns.

Example: The example shows how to hide the column or the group of columns.

Output: