html tutorial - <colgroup> Column Group tag in HTML - html5 - html code - html form
Learn html - html tutorial - column group colgroup tag in html - html examples - html programs
- The <colgroup> tag specifies a group of columns in a table for formatting.
- The <colgroup> tag is suitable for applying styles to whole columns, instead of copying the styles for each cell, for each row.
- The <colgroup> tag supports Global Attributes and Event Attributes.
Syntax for <colgroup> tag :
<colgroup>Content</colgroup>Differences between HTML 4.01 and HTML5 for <colgroup> tag:
HTML 4.01
- <align>,<char>,<charoff>,<valign>,<width> are supported.
HTML5
- All Layout attributes are not supported .
Sample coding for <colgroup> tag:
Tryit<!DOCTYPE html>
<html >
<body>
<table border=1>
<colgroup>
<col span="1" style="background-color:red">
<col style="background-color:green">
</colgroup>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Wiki</td>
<td>techy</td>
</tr>
</table>
</body>
</html>Code Explanation for <colgroup> tag :
- <colgroup> tag - is used for group the column in the table.
- Col is the tag and the style color red is applied for single column with its span property as 1.
Output for <colgroup>Tag :
- Here in this output Red Color style property for single column has been applied over here whose span property is 1.
- Note: Here span property “1” indicates the first column.
Attribute of <colgroup> tag:
| Attribute | Value | HTML4.0.1 | HTML5 | Description |
|---|---|---|---|---|
| span | number | Yes | Yes | Defines the number of columns. |
| align | left right center justify char |
Yes | No | Provides the alignment of the content. |
| width | % pixels relative_length |
Yes | No | Defines the width. |
| valign | top middle bottom baseline |
Yes | No | Describes the alignment of the content in vertical. |
| char | character | Yes | No | Defines the content alignment relevant to a character. |
| charoff | number | Yes | No | Provides the number of characters. |
Browser support for <colgroup> tag:
 |
 |
 |
 |
 |
|---|---|---|---|---|
| Yes | Yes | Yes | Yes | Yes |
Tips and Notes:
- The <colgroup>tag have a child of <table> tag.
- <col> tag is used within the <colgroup>tag to specifies another properties to the column.