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.
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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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.
HTML
<!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:
Similar Reads
HTML <colgroup> Tag The <colgroup> tag in HTML is used to group one or more <col> elements, allowing you to apply styles or attributes (such as width) to entire columns in a <table>.HTML<!DOCTYPE html> <html> <body> <table> <colgroup> <col span="2" style="background-co
2 min read
HTML Table Borders HTML Table Borders define the visible lines around cells and the overall table. They help in creating clear distinctions between various sections of the table, making it easier to understand and show information clearly. This attribute allows you to control the border's style, color, and width, for
5 min read
HTML DOM HGroup Object The DOM HGroup Object is used to represent the HTML <hgroup> element. It can be accessed by using any selector in JavaScript like getElementById(). Syntax: document.getElementById("hgroupid"); The below examples demonstrate the use of the hgroup Object. Example 1: In this example, the backgrou
2 min read
HTML Tables HTML (HyperText Markup Language) is the standard markup language used to create and structure web pages. It defines the layout of a webpage using elements and tags, allowing for the display of text, images, links, and multimedia content. As the foundation of nearly all websites, HTML is used in over
10 min read
HTML <col> Tag HTML <col> tag defines attributes for table columns within the <colgroup> element, allowing styling and formatting of columns, such as width, alignment, and background color. This tag does not contain closing tags.Column Properties allows setting visual aspects (like background color, wi
2 min read
HTML | <colgroup> valign Attribute The HTML <colgroup> valign Attribute is used to specify the vertical alignment of text content in a colgroup Element. Syntax: <colgroup valign="top | middle | bottom | baseline"> Attribute Values top: It sets the content to top-align. middle: It sets the content to middle-align. bottom:
1 min read