Contents
HTML Columns: Main Tips
- The
<colgroup>element sets a group of columns in HTML tables. - This element is a parent of <col>.
- The <table> element is a parent of
<colgroup>in HTML.
Use and Purpose of colgroup
The <colgroup> element specifies a common formatting style for a group of HTML columns.
Note: a <col> element can be used within <colgroup> to define a different property for a single column in the group.
<table>
<colgroup>
<col span="1" style="background-color: cornsilk;">
<col style="background-color: bisque;">
</colgroup>
<tr>
<th>Price</th>
<th>Item</th>
<th>Quantity</th>
</tr>
<tr>
<td>100</td>
<td>Peanut Butter</td>
<td>2</td>
</tr>
</table>
The <table> tag needs to be the parent of the <colgroup> element. The <colgroup> tag must be positioned before any <thead>, <tbody>, <tfoot>, <tr> tags and after <caption> tags.
span
The span attribute specifies a number of columns, indicating the span of a column group.
<table>
<colgroup span="2" style="background-color: darkgray;"></colgroup>
<tr>
<th>Name</th>
<th>City</th>
</tr>
<tr>
<td>James</td>
<td>New York</td>
</tr>
<tr>
<td>Laura</td>
<td>Chicago</td>
</tr>
</table>Remember: always use <colgroup> with span when there are no <col> elements.
Deprecated Attributes
align
It defined the alignment of contents in a column group. Not supported in HTML5: apply the CSS text-align property instead.
<table style="width: 100%;">
<colgroup align="right"></colgroup>
<tr>
<th>Name</th>
</tr>
<tr>
<td>James</td>
</tr>
</table>
char
It set the alignment of contents in a column group to a character. Not supported in HTML5.
<table style="width: 100%;">
<colgroup align="left"></colgroup>
<colgroup align="char" char="."></colgroup>
<tr>
<th>Name</th>
<th>Earning</th>
</tr>
<tr>
<td>James</td>
<td>$100.00</td>
</tr>
</table>
charoff
It specified the number of characters to offset the content of a column group from the alignment character. Not supported in HTML5.
<table style="width: 100%;">
<colgroup align="left"></colgroup>
<colgroup align="char" char="." charoff="2"></colgroup>
<tr>
<th>Name</th>
<th>Earnings</th>
</tr>
<tr>
<td>James</td>
<td>$100.00</td>
</tr>
<tr>
<td>Laura</td>
<td>$10.00</td>
</tr>
</table>
valign
It set the vertical alignment of a column group. Not supported in HTML5 - apply vertical-align as an alternative.
<table style="height: 200px;">
<colgroup valign="top">
<colgroup valign="bottom">
<tr>
<th>Name</th>
<th>Designation</th>
</tr>
<tr>
<td>James</td>
<td>Engineer</td>
</tr>
</table>width
It defined the width of a column group (usually in pixels). Since it is also not supported in HTML5, you should use the CSS width property.
<table>
<colgroup width="200">
<tr>
<th>Name</th>
<th>Department</th>
</tr>
<tr>
<td>James</td>
<td>Construction</td>
</tr>
</table>