
- HTML Home
- HTML Roadmap
- HTML Introduction
- HTML History & Evolution
- HTML Editors
- HTML Basic Tags
- HTML Elements
- HTML Attributes
- HTML Headings
- HTML Paragraphs
- HTML Fonts
- HTML Blocks
- HTML Style Sheet
- HTML Formatting
- HTML Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Frames
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Code Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Table Headers & Captions
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB & RGBA Colors
- HTML - HEX Colors
- HTML - HSL & HSLA Colors
- HTML - HSL Color Picker
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - Document Object Model (DOM)
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Character Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <colgroup> Tag
Introduction to <colgroup> Tag
The HTML <colgroup> tag is used to group one or more columns within the <table>, providing a way to apply specific styles or attributes to entire columns instead of individual cells. It is used in combination with the <col> tag to improve the table visual presentation. The <colgroup> tag makes the table structure more organized and allows for easier styling through CSS.
The <colgroup> tag is not mandatory for table structure, it provides a semantically better way of grouping columns for applying styles to individual <td> or <th> elements.
Syntax
Following is the syntax of HTML <colgroup> tag −.
<colgroup>...</colgroup>
Attributes
HTML colgroup tag supports Global and Event attributes of HTML. Some Specific attributes as well which are listed bellow.
Attribute | Value | Description |
---|---|---|
span | number | Specifies the number of consecutive columns the <col> element spans. |
align | left right center justify |
Specifies the alignment of text content(Deprecated). |
bgcolor | color | Specifies the background color of each column cell(Deprecated). |
char | character | Specifies the alignment of the content to a character of each column cell(Deprecated). |
charoff | number | Specifies the number of characters to offset the column cell content from the alignment character specified by the char attribute(Deprecated). |
valign | baseline bottom middle top |
Specifies the vertical alignment of each column cell(Deprecated). |
Example : Basic Usage
Let's look at the following example, where we are going to consider the basic usage of the <colgroup> tag.
<!DOCTYPE html> <html> <body> <table border="1"> <colgroup> <col style="background-color:#ABEBC6"> <col style="background-color:#BB8FCE"> </colgroup> <tr> <th>Roll.No</th> <th>Name</th> </tr> <tr> <td>1</td> <td>Maya</td> </tr> <tr> <td>2</td> <td>Surya</td> </tr> <tr> <td>3</td> <td>Ram</td> </tr> </table> </body> </html>
Example : Using span Attribute
Consider the following example, where we are going to use the span attribute along with the <colgroup> tag.
<!DOCTYPE html> <html> <style> table, th, td { border: 1.5px solid #DE3163; } </style> <body> <table> <colgroup> <col span="2" style="background-color:#F9E79F"> </colgroup> <tr> <th>Item</th> <th>Price</th> </tr> <tr> <td>5-Star</td> <td>$10</td> </tr> <tr> <td>Dairy-Milk</td> <td>$50</td> </tr> <tr> <td>Kitkat</td> <td>$20</td> </tr> </table> </body> </html>
Example : Hiding Column
In the following example, we are going to hide the column using the visibility:collapse property.
<!DOCTYPE html> <html> <style> table, th, td { border: 1.5px solid #DE3163; border-collapse: collapse; } </style> <body> <table style="width: 100%;"> <colgroup> <col span="2"> <col span="3" style="visibility: collapse"> </colgroup> <tr> <th>ID</th> <th>Employee</th> <th>Department</th> <th>Age</th> </tr> <tr> <td>112</td> <td>Rahul</td> <td>IT</td> <td>22</td> </tr> <tr> <td>113</td> <td>Ram</td> <td>Associate</td> <td>24</td> </tr> <tr> <td>114</td> <td>Maya</td> <td>HR</td> <td>30</td> </tr> <tr> <td>115</td> <td>Rahul</td> <td>BPO</td> <td>23</td> </tr> </table> </body> </html>
Supported Browsers
Tag | ![]() |
![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
colgroup | Yes | Yes | Yes | Yes | Yes |