<colgroup> HTML Tag

Element of
Tables
What does <colgroup> HTML Tag do?
The <colgroup> element is used a parent container for one or more <col> elements which are used to target columns in an HTML table.
Display
none

Code Example

<style>
.total {
 background-color: #eeeeee;
}
</style>
<table>
<colgroup>
 <col span="3">
 <col class="total">
</colgroup>
<tr>
<th>Item</th> 
<th>Qty.</th> 
<th>Price</th>
<th>Cost</th> 
</tr>
<tr>
<tr>
<td>Bananas</td>
<td>5</td>
<td>0.50</td>
<td>2.50</td>
</tr>
<tr>
<td>Apples</td>
<td>2</td>
<td>0.25</td>
<td>0.50</td>
</tr>
<tr>
<td>Oranges</td>
<td>3</td>
<td>0.75</td>
<td>2.25</td>
</tr>
<tr>
<td colspan="3">TOTAL</td>
<td>5.25</td>
</tr>
</table>
Item Qty. Price Cost
Bananas 5 0.50 2.50
Apples 2 0.25 0.50
Oranges 3 0.75 2.25
TOTAL 5.25

Using <col> and <colgroup>

The <colgroup> element serves only as a container for one or more <col> elements, which define columns within a <table>. For more information about table columns, including common problems and solutions for styling them, see the <col> element documentation

Adam is a technical writer who specializes in developer documentation and tutorials.

Browser Support for colgroup

AllAllAllAllAllAll