DevGuru HTML Tag: colgroup

TAG: colgroup

<colgroup> ... </colgroup>
Available in versions: 4.0
Browser compatibility: Explorer 4, 5 Netscape 4, 6

The <colgroup> tag allows you to create a column-centric table as compared to the standard HTML table which is row-centric. The columns in the table are assigned to column groups using this tag. You can have one or more groups of columns.

If you are not using the span attribute of this tag, then you can use the col tag to assign attribute values to the individual columns within the colgroup elements.

The colgroup tag can only be used inside a table element. The closing tag is optional. However, it is recommended that it always be included.

Core Attributes

class dir id lang onclick ondblclick onkeydown onkeypress onkeyup onmousedown onmousemove onmouseout onmouseover onmouseup style title

Attributes

align
The align attribute is used to set the horizontal alignment of the cell contents. The possible values are center, char, justify, left, and right.

char
The char attribute permits you to select a character that will be used to align the contents of the cells in a column. This was designed to allow the decimal points in a column of numbers to be in vertical alignment. The default value is country dependent. In the U.S., it is the first occurrence of a period or a decimal point.

charoff
The charoff attribute is an integer used to specify if the value designated in the char attribute is to be the first, second, or whatever occurrence.

span
The span attribute is used to set the number of columns that are associated with each column group. If the columns are dissimilar, however, use the col tag to create each column, rather than this attribute.

valign
The valign attribute is used to set the vertical alignment of the cell contents. The possible values are baseline, bottom, middle, and top.

width
The width attribute is used to set the width of each of the spanned columns. The value can be a percentage of the total width or an integer number of pixels.

Code:
<table width="90%" border="10" cellspacing="5">
<caption>
<center><b>Column Group Table</b></center>
<br>
This table uses the <b>colgroup</b> and <b>col</b> tags
</caption>
<colgroup>
<col width="20%">
<col width="30%">
<col width="15%">
</colgroup>
<colgroup>
<col width="15%">
<col width="20%">
</colgroup>
<tr>
<th>First Column Header</th>
<th>Second Column Header</th>
<th>Third Column Header</th>
<th>Fourth Column Header</th>
<th>Fifth Column Header</th>
</tr>
<tr>
<td>First Column First Row</td>
<td>Second Column First Row</td>
<td>Third Column First Row</td>
<td>Fourth Column First Row</td>
<td>Fifth Column First Row</td>
</tr>
<tr>
<td>First Column Second Row</td>
<td>Second Column Second Row</td>
<td>Third Column Second Row</td>
<td>Fourth Column Second Row</td>
<td>Fifth Column Second Row</td>
</tr>
</table>

Output:

**Column Group Table**
This table uses the **colgroup** and **col** tags
First Column Header	Second Column Header	Third Column Header	Fourth Column Header	Fifth Column Header
First Column First Row	Second Column First Row	Third Column First Row	Fourth Column First Row	Fifth Column First Row
First Column Second Row	Second Column Second Row	Third Column Second Row	Fourth Column Second Row	Fifth Column Second Row