<colgroup> HTML Tag

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>

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 Wood

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

Browser Support for colgroup

All	All	All	All	All	All