What is the Use of Table-Column Group and Table-Row Group in CSS

Grouping in Tables allows the user to merge two or more cells together to showcase a single value or a piece of text that corresponds to multiple previous entries. The grouping of cells presents a clean outlook of the table and makes the entire presentation concise and accessible for the reader. The technical term for the grouping of cells in a table in CSS is ‘span’. It is such that if one particular row or column spans a value larger than “1”, it is considered to be a Table-Group.

What is a Table-Column Group?

A Table-Column Group, as the name suggests, is a group of cells from multiple columns. All the values in a particular column are related to each other. A Table-Column hosts an element that encompasses multiple columns. We use a “<colgroup>” tag to group the columns together in a table in CSS. Then, the span value is defined to note how many columns the group will have.

Example
In the table about the biodata of company employees where “Name”, “Age”, and “Height” are recorded, each blue column corresponds to a specific employee, demonstrated in the following example:

Follow the below-given steps according to the above code:

• Start by creating a table and add the <colgroup> tag.
• Use the span utility class and specify the number of columns to be grouped together.
• Now, close the colgroup using the </colgroup> tag.
• Also, input the stated data in the table rows using the <tr> and <td> tags.
• Close out the table via the </table> tag.

Output

The ‘span’ of cells in a table in HTML represents how many columns a single cell can cover. It offers the same use as the ‘merge’ cells function in Microsoft Excel.

What is a Table-Row Group?

A Table-Row Group is the binding together of multiple rows to make a single group. A singular element encompasses multiple rows. It is done via the “<rowgroup>” tag.

Example
The following table showcasing the sales made by the employees in a month can be shown by grouping the row containing the name of the month against the names of multiple employees. Then, their sales can be shown corresponding to their names. We have illustrated the same in the below-code:

In the above-stated code:

• Define a table and add the <colgroup> tag.
• Define the grouping of the columns using the colspan utility class.
• Likewise, define the grouping of the rows via the rowspan utility class.
• Now, input the data for the sales of all the individuals for each of the two months.
• Finally, close the table using the </table> tag.

Output

Conclusion

The individual cells in a table can be grouped if one value corresponds to multiple other entries. We have also observed that the table can be grouped in terms of either columns or rows. Both of these have their own functionalities and can be used wherever required.