HTML Colgroup Tag
Reference on the Colgroup Element of HTML. Including its useful example, and a list of allowed attributes.
The colgroup element, is used inside table elements, to create a group of columns, for styling purposes.
Normally it would just be possible to style rows and table cells, but the colgroup element makes it possible to easily to style individual columns in the table.
The colgroup element should be placed inside a table element.
Attributes
| Attribute: | Value: | Description: |
| Attrs | Other Attributes | Common, Event, I18n |
| width | Length Unit | Sets the width of the column'(s). |
| span | NUMBER | Number of columns to effect. |
| cellhalign | left|center|right|justify|char | horizontal alignment in cells |
| cellvalign | top|middle|bottom|baseline | vertical alignment in cells |
The Span Attribute
This attribute specifies the number of columns in a column group. Using it will make it easier to style a group of columns, or even singled out columns
Example
Each col element inside colgroup, represents one or more columns in the group. As such, if we want to select a specific column, we may use the below.
<table style="width:100%;border:1px solid black;">
<colgroup>
<col span="2"> <!--First 2 columns-->
<col style="background: silver;" id="ThisColumn"> <!--Assign id to third column-->
</colgroup>
<tr>
<td>Col 1</td>
<td>Col 2</td>
<td>Col 3</td>
</tr>
<tr>
<td>HTML table</td>
<td>col element</td>
<td>tag</td>
</tr>
<tr>
<td>HTML col</td>
<td>Grouped attributes</td>
<td>and</td>
</tr>
</table>
Above would assign an id to the third column in the table, allowing us to style it with css by using its id when applying styles I.e.
#ThisColumn {
/* Example of how to apply css styles to a table column */
background: silver;
}