How to include groups of table columns in HTML

In HTML, you can use the <colgroup> and <col> elements to group and style columns within a table. This approach allows you to apply common styling or formatting to a specific group of table columns.

By using these elements, you can enhance the structure and presentation of your tables.

1. The <colgroup> element is used to group table columns together. It acts as a container for one or more <col> elements.
2. Inside the <colgroup> element, you define <col> elements to represent individual columns or column groups. In the code snippet, we have two <col> elements.
3. The span attribute in the first <col> element specifies the number of consecutive columns to include in the group. In this case, we set it to 2, so it includes the first two columns.
4. You can apply styling to the <col> elements using the style attribute. In the example, we set the background color of the first two columns to light blue and the third column to light green.
5. The <colgroup> and <col> elements are placed before the <tr> (table row) and <th> (table header) or <td> (table data) elements. The browser will apply the specified styling to the corresponding columns in the table.