HTML Colgroup Tag


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>
<colgroup></colgroup>
<colgroup span="3"></colgroup>
<colgroup span="2"></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>                           

Country Salmon Shrimps Oysters Rice Wheat
United Kingdom 2050 1545 1156 5007 12254
United States 1358 1884 784 10597 24554
Australia 985 65 518 2548 10548

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
Country Salmon Shrimps Oysters Rice Wheat
United Kingdom 2050 1545 1156 5007 12254
United States 1358 1884 784 10597 24554
Australia 985 65 518 2548 10548

 

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
Responses are currently closed, but you can trackback from your own site.

Comments are closed.

Designed for Mytoptutorials.com