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: