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>. [GFGTABS] HTML <!DOCTYPE html> <html> <body> <table> <colgroup> <col span="2
2 min read
HTML DOM ColumnGroup Object
The ColumnGroup Object in HTML DOM is used to represent the HTML <colgroup> element. This tag is used to set or return the properties of <colgroup> element. It can be accessed by using getElementById() method. Syntax: document.getElementById( "ColGroup_ID" );This ColGroup_ID is assigned
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 Tables allow you to arrange data into rows and columns on a web page, making it easy to display information like schedules, statistics, or other structured data in a clear format. An HTML table is created using the <table> tag. Basic HTML Table StructureAn HTML table is created using the
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, w
2 min read
HTML <hgroup> Tag
The <hgroup> tag in HTML is used to group multiple heading elements (<h1>, <h2>, etc.) together. However, the <hgroup> tag is now deprecated in HTML5 and is no longer recommended for use. [GFGTABS] HTML <!DOCTYPE html> <html> <body> <hgroup> <h1>
2 min read
HTML Table Headers
The HTML Table Headers can be utilized to define a table's header with the help of the <thead> tag. It is typically placed after the <caption> tags and should precede the <tbody> and <tfoot> tags. An HTML table can include a table header, footer, and body to organize its stru
4 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
HTML Table Exercises
This HTML Table Exercise provides practical questions and will cover all possible questions based on HTML Tables to ace you in the interview. 1. What is the basic HTML tag used to create a table?The <table> tag is used to create a table in HTML. This tag starts the table structure. <table
8 min read