By using this site you agree to the use of cookies by Brugbart and our partners.

Learn more

HTML Colgroup Tag

Reference on the Colgroup Element of HTML. Including its useful example, and a list of allowed attributes.

Edited: 2014-12-28 07:11

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.


AttrsOther AttributesCommon, Event, I18n
widthLength UnitSets the width of the column'(s).
spanNUMBERNumber of columns to effect.
cellhalignleft|center|right|justify|charhorizontal alignment in cells
cellvaligntop|middle|bottom|baselinevertical 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


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;">
   <col span="2"> <!--First 2 columns-->
   <col style="background: silver;" id="ThisColumn"> <!--Assign id to third column-->
    <td>Col 1</td>
    <td>Col 2</td>
    <td>Col 3</td>
    <td>HTML table</td>
    <td>col element</td>
    <td>HTML col</td>
    <td>Grouped attributes</td>

Brugbart Vision!

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;