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>
| AA | BB | CC |
| DD | EE | FF |
Colgroup Examples
<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>
| A | B | C | D | E | F |
| G | H | J | K | L | |
| M | N | O | P | Q | |
.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>
| Q | W | E | R | T |
|---|---|---|---|---|
| Y | U | I | O | P |
| A | S | D | F | G |
| H | J | K | L | Z |
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>
.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:
<col style="background:blue;">
<col class="name" span="2">
<col>
</colgroup>
