Description:
The HTML colgroup tag is used for specifying properties for a group of columns within a table.
If you need to apply different properties to a column within a colgroup, you can use the HTML col tag within the colgroup tag.
The HTML colgroup tag specifies a group of one or more columns in a table for formatting.
The <colgroup> tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.
Note: The <colgroup> tag must be a child of a <table> element, after any <caption> elements and before any <thead>, <tbody>, <tfoot>, and <tr> elements.
Tip: To define different properties to a column within a <colgroup>, use the <col> tag within the <colgroup> tag.
Differences Between HTML 4.01 and HTML5:
Most of the attributes in HTML 4.01 are not supported in HTML5.
Difference between HTML and XHTML:
NONE
Example:
The following example shows a common use of the HTML colgroup element. There, the columns are grouped thematically.
| Code | View | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
<table> |
|
In the next example, the same table is inserted, this time, using the HTML coulgroup element together with the HTML col element to define some attributes to the columns. The semantic of the previous example remains untouched.
| Code |
|---|
|
<table> <colgroup style="background: #BBBBFF;"></colgroup> <colgroup span="3"> <col style="background: #AAFFAA;" /> <col style="background: #BBFFBB;" /> <col style="background: #CCFFCC;" /> </colgroup> <colgroup span="2"> <col style="background: #FFBBBB;" /> <col style="background: #FFCCCC;" /> </colgroup> <tr> <th>Country</th> <th>Salmon</th> <th>Shrimps</th> <th>Oysters</th> <th>Rice</th> <th>Wheat</th> </tr> <tr> <td>United Kingdom</td> <td>2050</td> <td>1545</td> <td>1156</td> <td>5007</td> <td>12254</td> </tr> <tr> <td>United States</td> <td>1358</td> <td>1884</td> <td>784</td> <td>10597</td> <td>24554</td> </tr> <tr> <td>Australia</td> <td>985</td> <td>65</td> <td>518</td> <td>2548</td> <td>10548</td> </tr> </table> |
| View | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
Attributes:
| Attribute | Value | Description |
|---|---|---|
| align |
right left center justify char |
Defines horizontal alignment |
| char | character | Defines a character to use to align text on (use with align="char"). |
| charoff | pixel | Specifies an alignment offset (either in pixels or percentage value) against the first character as specified with the char attribute. |
| span | number | Defines the number of columns the <col> should span |
| valign |
bottom middle top baseline |
Defines vertical alignment |
| width | pixels or % | Specifies a default width for each column spanned by the current col element |
Standard Attributes:
| Attribute | Description |
|---|---|
| class | Document wide identifier |
| dir | Specifies the direction of the text |
| id | Document wide identifier |
| title | Specifies a title to associate with the element. |
| style | Helps to include inline casecadubf style sheet. |
| lang | Sets the language code. |
Event Attributes:
| Attribute | Description |
|---|---|
| onclick | Script runs when a mouse click |
| ondblclick | Script runs when a mouse double-click |
| onmousedown | Script runs when mouse button is pressed |
| onmouseup | Script runs when mouse button is released |
| onmouseover | Script runs when mouse pointer moves over an element |
| onmousemove | Script runs when mouse pointer moves |
| onmouseout | Script runs when mouse pointer moves out of an element |
| onkeypress | Script runs when key is pressed and released |
| onkeydown | Script runs when key is pressed |
| onkeyup | Script runs when key is released |
The post HTML Colgroup Tag appeared first on .