The <colgroup> tag in HTML is used to group one or more column within a table. By grouping columns together, you can apply consistent styling to multiple columns at once, such as setting their width or background color. You can set attributes like width for columns within a group, which simplifies managing tables with many columns.
Example
<table> <colgroup> <col span="2" style="background-color: hsl(69, 88%, 87%); width: 100px;"> <col style="background-color: #c8fe63; width: 150px;"> </colgroup> </table>
1. <colgroup>: Groups and styles columns in a table, allowing for easier management and application of attributes to multiple columns.
2. <col>: Defines specific properties for individual columns within the <colgroup>.
column-group.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML Column Group Example</title> <style> table { width: 50vw; border-collapse: collapse; } table, th, td { border: 1px solid black; } caption { font-weight: bold; font-size: 1.2em; margin-bottom: 10px; } tfoot > tr > td{ text-align: center; } </style> </head> <body> <h1>colgroup Demo</h1> <table> <colgroup> <col span="2" style="background-color: hsl(69, 88%, 87%); width: 100px;"> <col style="background-color: #c8fe63; width: 150px;"> </colgroup> <caption>Employees Of ABC Corporation</caption> <thead> <tr> <th>Name</th> <th>Age</th> <th>Occupation</th> </tr> </thead> <tbody> <tr> <td>Rama Krishna</td> <td>36</td> <td>Principle Engineer</td> </tr> <tr> <td>Abhishek Ramesh</td> <td>32</td> <td>Frontend Engineer</td> </tr> </tbody> </table> </body> </html>
Previous Next Home
No comments:
Post a Comment