<colgroup> HTML Tag

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Element of
HTML Tables: Find Out When To Use Them (And When To Avoid)
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>
ItemQty.PriceCost
Bananas50.502.50
Apples20.250.50
Oranges30.752.25
TOTAL5.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

iefirefoxchromeedgesafariopera
AllAllAllAllAllAll