colgroup HTML Table Tag

The colgroup tag specifies a group of columns in an HTML table for setting background color. With the help of using colgroup with col tags. We can achieve a similar effect with td:nth-child() CSS selectors.

Colgroup Sytax

A <colgroup>...</colgroup> (opening and closing tags) must be the child of a <table> element, after the <caption> element (if exists) and before any <thead>, <tbody>, <tfoot>, and <tr> elements.

<table>
    <colgroup>
        <col class="className" />
        <col span="2" />
    </colgroup>
    <tbody>
      ...

The span tag attribute is used to set how many columns the rule is applied to.

Set Column Background Color

The example below demonstrates that only the background color is taken into account among the styles defined in col elements. Other syltes, like text color, opacity and font-weight are ignored.

<table>
    <colgroup>
        <col style="background:lightblue;
color:lightgreen"
> <col style="background:lightgreen;
opacity:0.5"
> <col style="font-weight:bold"> </colgroup> <tbody> <tr> <td>AA</td><td>BB</td><td>CC</td> </tr> <tr> <td>DD</td><td>EE</td><td>FF</td> </tr> </tbody> </table>
AABBCC
DDEEFF

Colgroup Examples

Assigning styles can be made through style and class tag attributes.
<table>
  <colgroup>
    <col class="brick">
    <col style="background:AliceBlue">
    <col style="background:FloralWhite"
         span="3">
    <col style="background:Khaki">
  </colgroup>
  <tr>
    <td>A</td><td>B</td><td>C</td>
    <td>D</td><td>E</td><td>F</td>
  </tr>
  <tr>
    <td>G</td>
    <td colspan="2">H</td>
    <td rowspan="2">J</td>
    <td>K</td><td>L</td>
  </tr>
  <tr>
    <td>M</td><td>N</td><td>O</td>
    <td>P</td><td>Q</td>
  </tr>
</table>
ABC DEF
G H J KL
MNO PQ

 
.brick {
   background: #c55f59;
   font-weight: bold;
   color: #FFF;
}

Only the background style
is taken into account.

 
Colgroups in a table with caption, thead, tbody and tfoot.
Notice that the inline style and class assigned to the individual S and D td cells overwrite the style defined by the colgroup.
<table class="demo">
  <caption>QWERTY</caption>
  <colgroup>
    <col class="Ivory">
    <col style="background:MistyRose" 
         span="3">
    <col style="background:Tan">
  </colgroup>
  <thead>
    <tr>
      <th>Q</th><th>W</th><th>E</th>
      <th>R</th><th>T</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Y</td><td>U</td><td>I</td>
      <td>O</td><td>P</td>
    </tr>
    <tr>
      <td>A</td>
      <td class="brick">S</td>
      <td style="background:white">D</td>
      <td>F</td><td>G</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>H</td><td>J</td><td>K</td>
      <td>L</td><td>Z</td>
    </tr>
  </tfoot>
</table>
QWERTY
QWE RT
YUI OP
A S D FG
HJK LZ

 
thead {
   background-color: rgba(255,255,255,0.5);
   font-weight: bold;
}
tfoot {
   background-color: rgba(0,0,0,0.2);
   font-weight: bold;
}

Colspan - Colgroup Conflict

When table cells using colspan attributes overlap more colgroup rules the whole cell will be colored to the colgroup rule applied to the left side of the cell.

<table>
  <colgroup>
    <col>
    <col class="Ivory" span="2">
    <col style="background:Tan">
  </colgroup>
  <tr>
    <td>1</td><td>2</td>
    <td>3</td><td>4</td>
  </tr>
  <tr>
    <td colspan="2">AA</td>
    <td colspan="2">BB</td>
  </tr>
  <tr>
    <td>CC</td>
    <td colspan="3">DD</td>
  </tr>
  <tr>
    <td colspan="4">EE</td>
  </tr>
</table>
 1   2   3   4 
AA BB
CC DD
EE

In the example above, the AA cell (colspan = 2) overlaps both the white and ivory columns.
The entire cell will be colored white because that color is applied to its left side.

Column Styling Without Using Colgroups

Instead of using colgroup in our HTML we can easily reproduce the same column coloring effect using CSS styles, targetting the columns with the td:nth-child(x) CSS selector, as demonstrated below.

<table class="rainbowTable">
  <tbody>
    <tr>
      <td>AA</td>
      <td>BB</td>
      <td>CC</td>
    </tr>
    <tr>
      <td>DD</td>
      <td>EE</td>
      <td>FF</td>
    </tr>
  </tbody>
</table>
AA BB CC
DD EE FF

 
.rainbowTable td:nth-child(1){
   background: #FF9580
}
.rainbowTable td:nth-child(2){
   background: #FFD480
}
.rainbowTable td:nth-child(3){
   background: #FFFF80
}


HTML table column styling with nth-child CSS pseudo class.

Using the same approach, we can target table rows with the tr:nth-child(x) selector.

☝ The advantage of using the nth-child technique, instead of colgroups is that we can change other styles, not just background color.

Colgroup In Div Tables

Div tables are HTML tables built with structured <div> elements. We can achieve the colgroup effect using the CSS nth-child CSS pseudo class, as demonstrated for tables under the previous heading.

<div class="divTable rainbowTable">
  <div class="divTableBody">
    <div class="divTableRow">
      <div class="divTableCell">AA</div>
      <div class="divTableCell">BB</div>
      <div class="divTableCell">CC</div>
    </div>
    <div class="divTableRow">
      <div class="divTableCell">DD</div>
      <div class="divTableCell">EE</div>
      <div class="divTableCell">FF</div>
    </div>
  </div>
</div>
AA
BB
CC
DD
EE
FF

.rainbowTable .divTableCell:nth-child(1){
   background: #FF9580
}
.rainbowTable .divTableCell:nth-child(2){
   background: #FFD480
}
.rainbowTable .divTableCell:nth-child(3){
   background: #FFFF80
}


Colored columns in a table made of div elements.

Colgroup Generator

The online HTML table generator doesn't support the colgroup, but we can easily generate the code for a basic table. Next we can manually add colgroups in the source code, above the table rows, using the snippets below:

<colgroup>
   <col style="background:blue;">
   <col class="name" span="2">
   <col>
</colgroup>
2 × 2

Table

Style Name
Georgia
Georgia
Palatino
Times New Roman
Arial
Arial Black
Comic Sans
Impact
Lucida Sans
Tahoma
Trebuchet
Verdana
Courier
Lucida Console
Left Center Right
px
px

Body

Left Center Right

HTML
Preview Apply »
HTML Copy
CSS « Apply