HTML Colgroup Tag

We’ll talk about colgroup Tag in this post. Wishing it would satisfy the requirements for learning.

With the <cologroup> and <col> tags, customize the background color of the three columns:


<!DOCTYPE html> <html> <body> <table> <colgroup> <col span="2" style="background-color:aqua"> <col style="background-color:yellow"> </colgroup> <tr> <th>ISBN</th> <th>Tesla ModelX</th> <th>Price</th> </tr> <tr> <td>3476896</td> <td>My first TESLA Car</td> <td>$5030</td> </tr> </table> </body> </html>

The following CSS code aligns text in table columns:


<!DOCTYPE html> <html> <body> <table style="width:100%"> <tr><th>ISBN</th> <th>Title</th><th>Price</th> </tr> <tr><td>3476896</td> <td>My Tesla Car</td> <td style="text-align:right">$80,000</td> </tr> <tr> <td>22822606</td> <td>My Tesla Truck</td> <td style="text-align:right">$88047</td> </tr> </table> </body> </html>

Text in table columns can be vertically aligned (using CSS):


<!DOCTYPE html> <html> <body> <table style="height:300px"> <tr> <th>Year</th> <th style="vertical-align:bottom">expenses</th> </tr> </table> </body> </html>

A table column’s width can be set with CSS as follows:


<!DOCTYPE html> <html> <body> <table> <tr> <th style="width:300px">Year</th> <th>Expences</th></tr> <tr> <td>2020</td><td>$100,000</td> </tr> <tr><td>2021</td> <td>$80,000</td> </tr> </table> </body> </html>

Uses and Definition

The colgroup Tag <colgroup> identifies a single or multiple-column group in a table for formatting.

The <colgroup> is an efficient way to apply styles to entire columns rather than writing them for each cell separately.

IMPORTANT: The <colgroup> tag is required to be a child of an table element after the caption elements and preceding <thead>, <tbody>, <tfoot>, and <tr> elements.
Advice: You can specify multiple properties for a column in a <colgroup> by adding the <col> tag within the <colgroup>.

Browser Compatibility



spannumberDetermine how many columns a column group needs to span.

Event Attributes

Similarly, the HTML5 colgroup Tag <colgroup> is compatible with the Event Attributes.<!–



mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]


Global Attributes

The colgroup Tag <colgroup> also functions with the Global Attributes in HTML.

CSS Default Settings

Thus many browsers will present the following default values for the Tag body <colgroup> element:

colgroup {
display: table-column-group;

HTML Colgroup Tag Advantages

The HTML <colgroup> tag provides several advantages when used to group and define columns in an HTML table:

  • By using the <colgroup> tag to group columns together, authors can apply attributes such as styles, width, and other properties to the entire group, rather than having to specify them for each individual column. This can simplify the markup of large tables and make it easier to maintain and update the table code.
  • Applying attributes such as background color or font size to an entire column group using the <colgroup> tag can help to ensure that the styling is consistent across all columns in the group. This can be particularly useful for large tables with many rows and columns, where it would be time-consuming to apply styles to each individual column.
  • The <colgroup> tag can be used to add headers and other metadata to column groups in a table, making it easier for screen readers and other assistive technologies to interpret the table and convey its contents to users with disabilities.
  • Using the <colgroup> tag to group columns together can help to reduce the overall size of the table markup, which can improve page load times and reduce server load.
  • The <colgroup> tag can help to provide a clear and organized structure to a table’s markup, making it easier to read and understand for both authors and users.
Do subscribe to our Newsletter below in order to be in touch with the latest technical knowledge on this site.

We value your feedback.

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

Leave a Reply

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