View video tutorial
HTML Table Colgroup
HTML
The <colgroup> tag is used to make group columns to apply styles.
HTML <colgroup> in table
➔ <cols> defines one of groups in <colgroup>.
➔ span and style attributes of <cols> defines the number of columns and the style to be applied on this group.
➔ More <cols> are used to create more groups.
Syntax
<!--CSS-->
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
</style>
<!--HTML-->
<table>
<colgroup>
<col span="2" style="background-color: #efffff">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Countries they flow through</th>
<th>Other ountries also flow through</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amazon River</td>
<td>Brazil</td>
<td>Peru, Colombia, and others</td>
</tr>
<tr>
<td>Nile River</td>
<td>Egypt and Sudan</td>
<td>Uganda, Tanzania, and Ethiopia and others</td>
</tr>
</tbody>
</table>
Rivers Table
| Name | Countries they flow through | Other ountries also flow through |
|---|---|---|
| Amazon River | Brazil | Peru, Colombia, and others |
| Nile River | Egypt and Sudan | Uganda, Tanzania, and Ethiopia and others |
| Mississippi River | North America | Canada |
| Ganges River | India | |
| Danube River | Germany | Austria, Hungary, and Romania |
| Volga River | Russia | |
| Yangtze River | China | |
| Yellow River (Huang He) | China |
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td,
th {
border: 1px solid #00000055;
text-align: left;
padding: 8px;
}
</style>
</head>
<body>
<h2>Rivers Table</h2>
<table>
<colgroup>
<col span="2" style="background-color: #efffff">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Countries they flow through</th>
<th>Other ountries also flow through</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amazon River</td>
<td>Brazil</td>
<td>Peru, Colombia, and others</td>
</tr>
<tr>
<td>Nile River</td>
<td>Egypt and Sudan</td>
<td>Uganda, Tanzania, and Ethiopia and others</td>
</tr>
<tr>
<td>Mississippi River</td>
<td>North America</td>
<td>Canada</td>
</tr>
<tr>
<td>Ganges River</td>
<td>India</td>
<td></td>
</tr>
<tr>
<td>Danube River</td>
<td>Germany</td>
<td>Austria, Hungary, and Romania</td>
</tr>
<tr>
<td>Volga River</td>
<td>Russia</td>
<td></td>
</tr>
<tr>
<td>Yangtze River</td>
<td>China</td>
<td></td>
</tr>
<tr>
<td>Yellow River (Huang He)</td>
<td>China</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>
Click on the "See output" button to see how it works.