Column groups (<colgroup>, <col />)

Column groups are assigned to make structural division between columns. In combination with style sheets they make powerful tool for highlighting differences or similarities amongst the columns.

The <colgroup> element creates a column group via attribute span. The <col /> element allows sharing attributes amongst several columns without grouping them together.

The <col /> is an empty tag, therefore the closing tag is forbidden.

Syntax:

<table><colgroup><col /></colgroup><tr><td></td></tr></table>

Attributes:

id, class (document-wide identifiers)
lang (language information), dir (text direction)
title (element title)
style (inline style information)
align, char, charoff, valign (cell alignment)
span, width (column group specific)
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events)

Example

HTML column grouping elements:

<html>

<head>
<title>HTML tutorial</title>
<style type="text/css">
col {
	background-color:#ddd;
}
col+col {
	background-color:#ccd;
	font-weight:bold;
}
th {
	font-variant:small-caps;
}
</style>
</head> 

<body>

<table cellpadding="1" cellspacing="2">
	<colgroup>
		<col span="2" />
		<col />
	</colgroup>
	<tr>
		<th>Quantity</th>
		<th>item</th>
		<th>price</th>
	</tr>
	<tr>
		<td>1/2 pound</td>
		<td>1 gallon</td>
		<td>1 loaf</td>
	</tr>
	<tr>
		<td>Lemons</td>
		<td>Milk</td>
		<td>Bread</td>
	</tr>
	<tr>
		<td>$1.25</td>
		<td>$2.00</td>
		<td>$1.55</td>
	</tr>

</table>

</body>

</html>

›› go to examples ››

Column groups (<colgroup>, <col />)

Syntax:

Attributes:

Example

HTML column grouping elements:

Comments

About

Contact

Get Connected