HTML Table Colgroup

Today we will cover HTML Table Colgroup, By using examples, we anticipate meeting the learning objectives.

The <colgroup> tag in HTML is used to group a set of table columns together for formatting purposes. It is typically used in conjunction with the <table> and <col> tags to define the visual presentation of a table.

The HTML table colgroup <colgroup> tag is employed to define specific table columns.

Here is an example of how to use the <colgroup> tag in HTML:

Example: 

<!DOCTYPE html> <html> <body> <table> <colgroup> <col style="background-color: #ff0000"> <col style="background-color: #00ff00"> <col style="background-color: #0000ff"> </colgroup> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table> </body> </html>


HTML Table Colgroup

When you need to modify a table’s first two columns, use the <colgroup> and <col> tags.

MONTUEWEDTHUFRISATSUN
1234567
891011121314
15161718192021
22232425262728

The HTML table colgroup <colgroup> tag can serve as the columns functionality container. The <col> tag is used to indicate each group.

By using the span attribute, you may control how many columns are affected by the formatting. For each column, the style can be set with the style attribute.

IMPORTANT: For colgroups, the number of permitted CSS properties is extremely small.
Here is how we can write an HTML code using <colgroup> tag:

Example: 

<!DOCTYPE html> <html> <body> <table> <colgroup> <col style="background-color: cyan;"> <col style="background-color: yellow"> <col style="background-color: pink"> <col style="background-color: orange"> </colgroup> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> <td>Cell 4</td> </tr> </table> </body> </html>

IMPORTANT: Each <colgroup> tag must be the first child of the <table> tag and appear after the caption, if any, but prior to any other table tags like <thead>, <tr>, <td>, etc.


CSS Properties

The colgroup only permits the usage of a very small number of CSS properties, including:

The following CSS properties can be used to style the columns within a <colgroup>:

  • background-color: Sets the background color of the columns within the <colgroup>.

  • width: Sets the width of the columns within the <colgroup>.
  • text-align: Sets the horizontal alignment of the text within the columns.
  • vertical-align: Sets the vertical alignment of the content within the columns.
  • border: Sets the border properties for the columns within the <colgroup>.
  • padding: Sets the padding properties for the columns within the <colgroup>.
  • margin: Sets the margin properties for the columns within the <colgroup>.


Hide Columns

There are several ways to hide a column in an HTML table.

To hide a column group in an HTML table, you can set the display property of the <colgroup> element to none using CSS:

Example: 

<!DOCTYPE html> <html> <body> <table> <colgroup style="display: none;"> <col> <col> </colgroup> <tr> <th>Hidden Column 1</th> <th>Hidden Column 2</th> <th>Visible Column 3</th> </tr> <tr> <td>Hidden Column 1</td> <td>Hidden Column 2</td> <td>Visible Column 3</td> </tr> </table> </body> </html>

Empty Colgroups

Here is an example of an empty <colgroup> tag being used to set the background color of all columns in a table:

Example: 

<!DOCTYPE html> <html> <body> <table> <colgroup style="background-color: #ff0000"></colgroup> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table> </body> </html>

Several Col Elements

Use several <col> tags within the <colgroup> if you would like to style additional columns in a variety of ways:

Example: 

<!DOCTYPE html> <html> <body> <table> <colgroup> <col style="width: 20%"> <col style="background-color: #ff0000"> <col style="width: 15%"> <col style="background-color: #00ff00"> </colgroup> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> <td>Column 4</td> </tr> </table> </body> </html>

Alternatively, you can set the visibility property of the <colgroup> element to hidden:

Example: 

<!DOCTYPE html> <html> <body> <table> <colgroup style="visibility: hidden;"> <col> <col> </colgroup> <tr> <th>Hidden Column 1</th> <th>Hidden Column 2</th> <th>Visible Column 3</th> </tr> <tr> <td>Hidden Column 1</td> <td>Hidden Column 2</td> <td>Visible Column 3</td> </tr> </table> </body> </html>

HTML Table Colgroup Advantages

The <colgroup> tag in HTML provides several advantages for web developers and content creators:

  • The <colgroup> tag allows developers to group table columns together and apply styling to the entire group, making it easier to create consistent and visually appealing table layouts.
  • The <colgroup> tag eliminates the need to add styling attributes to each individual <col> tag, which can result in cleaner and more manageable table markup.
  • By reducing the amount of markup needed to style a table, the <colgroup> tag can help to speed up page loading times and improve overall website performance.
  • The <colgroup> tag can be used to assign specific classes or IDs to table columns, which can improve the accessibility of tables for users with disabilities, such as those using screen readers.
  • The <colgroup> tag allows developers to apply styling to multiple columns at once, making it easier to adjust the layout of a table as needed without having to make changes to each individual column.
Do subscribe to our Newsletter below in order to be in touch with the latest technical information on this site.
We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *