HTML Table Colgroup facilitates to select the specific column or group of columns in a Table. It is mainly used for formatting or styling purposes. The combination of the <colgroup> and <col> elements can be used to style the first columns of a table, where the <colgroup> Element must be utilized as the container to specify the column.
We can provide only a few CSS styles to the Colgroup including width, visibility, background, and border. Other CSS styles are not applied to the <colgroup> element.
Note: The element <colgroup> must defined after table <caption> and before <tr>, <td>, <thead>, etc.
Table of Content
HTML Table colgroup
With the <colgroup> and <col> elements, the first two columns of the table are grouped. For styling with a specific background colour to the <col> element.
Example: Illustrating the styling of first two columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>HTML Table colgroup</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid #7a3f3f;
padding: 20px;
text-align: center;
}
col {
background-color: rgb(189, 222, 189);
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The HTML table <colgroup>
and <col> for style two
columns .
</h3>
<table>
<colgroup>
<col span="2">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Roll No</th>
</tr>
</thead>
<tbody>
<tr>
<td>Himani</td>
<td>10</td>
<td>1</td>
</tr>
<tr>
<td>Janvi</td>
<td>11</td>
<td>2</td>
</tr>
<tr>
<td>Disha</td>
<td>8</td>
<td>3</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Valid Colgroup CSS Properties
Only a few CSS properties, such as width, visibility, background color, and border, can be used for styling purposes with the colgroup and <col> elements.
Example: Implementation to show the valid properties width and background color for styling to the group of columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Table colgroup</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
}
h1,
h3 {
text-align: center;
color: green;
}
table {
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
colgroup >col {
background-color: rgb(178, 230, 178);
width: 500px;
}
th,
td {
border: 2px solid #7a3f3f;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The HTML table <colgroup>
and <col> for style.
</h3>
<table>
<colgroup>
<col span="2">
<col span="2">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Roll No</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td>Himani</td>
<td>10</td>
<td>A</td>
<td>1</td>
<td>MVM</td>
</tr>
<tr>
<td>Janvi</td>
<td>11</td>
<td>B</td>
<td>2</td>
<td>LMS</td>
</tr>
<tr>
<td>Disha</td>
<td>8</td>
<td>A</td>
<td>3</td>
<td>DPS</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Multiple Col Elements
Use multiple <col> elements to create separate groups of columns wrapped inside HTML Table <colgroup> and apply distinct styles to each group of columns. Here, we have grouped the first two columns to give a shade of green, while the next two columns have a shade of blue.
Example: The example shows the distinct styles to each group of columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>HTML Table colgroup</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid #7a3f3f;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The HTML table <colgroup>
and <col> for style.
</h3>
<table>
<colgroup>
<col span="2" style="background-color: rgb(179, 219, 179);">
<col span="2" style="background-color: rgb(184, 248, 239);">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Roll No</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td>Himani</td>
<td>10</td>
<td>A</td>
<td>1</td>
<td>MVM</td>
</tr>
<tr>
<td>Janvi</td>
<td>11</td>
<td>B</td>
<td>2</td>
<td>LMS</td>
</tr>
<tr>
<td>Disha</td>
<td>8</td>
<td>A</td>
<td>3</td>
<td>DPS</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Empty Colgroups
To style the second group of column, define an empty <colgroup> (without styling) first. Create multiple groups using <col> elements, then apply styles to the desired group, such as the second group of column.
Example: The example shows how to make Empty Colgroups, the first two columns are empty and the middle two have style.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>HTML Table colgroup</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
table {
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid #7a3f3f;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The HTML table <colgroup>
and <col> for style.
</h3>
<table>
<colgroup>
<col span="2">
<col span="2" style="background-color: rgb(184, 248, 239);">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Roll No</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td>Himani</td>
<td>10</td>
<td>A</td>
<td>1</td>
<td>MVM</td>
</tr>
<tr>
<td>Janvi</td>
<td>11</td>
<td>B</td>
<td>2</td>
<td>LMS</td>
</tr>
<tr>
<td>Disha</td>
<td>8</td>
<td>A</td>
<td>3</td>
<td>DPS</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Hide Columns
Set the property visibility to collapse to hide one or group of columns.
Example: The example shows how to hide the column or the group of columns.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,initial-scale=1.0">
<title>HTML Table colgroup</title>
<style>
h1,
h3 {
text-align: center;
color: green;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
table {
border: 2px solid black;
width: 100%;
border-collapse: collapse;
}
th,
td {
border: 2px solid #7a3f3f;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>The HTML table <colgroup>
and <col> for style.
</h3>
<table>
<colgroup>
<col span="2">
<col span="2" style="visibility: collapse;">
</colgroup>
<thead>
<tr>
<th>Name</th>
<th>Class</th>
<th>Section</th>
<th>Roll No</th>
<th>School</th>
</tr>
</thead>
<tbody>
<tr>
<td>Himani</td>
<td>10</td>
<td>A</td>
<td>1</td>
<td>MVM</td>
</tr>
<tr>
<td>Janvi</td>
<td>11</td>
<td>B</td>
<td>2</td>
<td>LMS</td>
</tr>
<tr>
<td>Disha</td>
<td>8</td>
<td>A</td>
<td>3</td>
<td>DPS</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
