- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML Tag
The <colgroup> tag is a group of one or more than one column in a table. It sets the style for all the columns.
Following is the attribute of the <colgroup> tag −
- span − Number of columns a column group should span is set with span attribute
Example
Let us now see an example to implement the <colgroup> tag −
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 2px solid black; } </style> </head> <body> <h2>Result</h2> <table> <colgroup> <col span="3" style="background-color:gray;"> <col style="background-color:orange;"> </colgroup> <tr> <th>Id</th> <th>Name</th> <th>Percentage</th> <th>Rank</th> </tr> <tr> <td>009</td> <td>Tom</td> <td>98</td> <td>1</td> </tr> <tr> <td>011</td> <td>Kieron</td> <td>97</td> <td>2</td> </tr> <tr> <td>039</td> <td>Gayle</td> <td>95</td> <td>3</td> </tr> <tr> <td>017</td> <td>Shaun</td> <td>92</td> <td>4</td> </tr> <tr> <td>009</td> <td>Kane</td> <td>91</td> <td>5</td> </tr> <tr> <td>025</td> <td>Steve</td> <td>87</td> <td>6</td> </tr> <tr> <td>013</td> <td>Jack</td> <td>85</td> <td>7</td> </tr> <tr> <td>023</td> <td>Tim</td> <td>84</td> <td>8</td> </tr> </table> </body> </html>
Output
This will produce the following output −
In the above example, we have set style for more than one column −
<colgroup> <col span="3" style="background-color:gray;"> <col style="background-color:orange;"> </colgroup>
We have set the gray background color style for the first 3 columns above in the <colgroup> element −
<col span="3" style="background-color:gray;">
The rest of the column(s) is set to orange background color style −
<col style="background-color:orange;">
Advertisements