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>w3wiki</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:
HTML Table Colgroup
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
- Valid Colgroup CSS Properties
- Multiple Col Elements
- Empty Colgroups
- Hide Columns