- 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 DOM ColumnGroup object
The HTML DOM ColumnGroup object is associated with the HTML <colgroup> element. The <colgroup> element is used to apply CSS styles to a specific number of columns or all columns. This gives us a greater control on the columns that are present in a table.
Properties
Following is the ColumnGroup property −
Property | Description |
---|---|
span | Sets or returns the value of the span attribute of a column group |
Syntax
Following is the syntax for −
Creating a ColumnGroup object −
var x = document.createElement("COLGROUP");
Example
Let us see an example for the ColumnGroup object −
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } #DIV1{ background-color:pink; } </style> </head> <body> <table id="TABLE1"> <tr> <th>FRUIT</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>MANGO</td> <td>YELLOW</td> <td>100RS</td> </tr> <tr> <td>GUAVA</td> <td>GREEN</td> <td>50RS</td> </tr> </table> <p>Click the below button to create a colgroup element with span = 2.</p> <button onclick="colFun()">COLGROUP</button> <script> function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id","DIV1"); x.setAttribute("span","2"); document.getElementById("TABLE1").appendChild(x); } </script> </body> </html>
Output
This will produce the following output −
On clicking COLGROUP −
In the above example −
We have first created a table with three rows and three columns and id “TABLE 1”. We have also applied some styles to the table and its children elements −
table, th, td { border: 1px solid black; } <table id="TABLE1"> <tr> <th>>FRUIT</th> <th>COLOR</th> <th>Price</th> </tr> <tr> <td>MANGO</td> <td>YELLOW</td> <td>100RS</td> </tr> <tr> <td>GUAVA</td> <td>GREEN</td> <td>50RS</td> </tr> </table>
We have then created a button COLGROUP that will execute colFun() upon being clicked by the user −
<button onclick="colFun()">COLGROUP</button>
The colFun() method creates a <colgroup> element and assigns it to the variable x. Using setAttribute() method the newly created <colgroup> element we assign it an id and span equals 2. We then append the <colgroup> element as the first child of table using the appendChild() method on the <table> element −
function colFun() { var x = document.createElement("COLGROUP"); x.setAttribute("id","DIV1"); x.setAttribute("span","2"); document.getElementById("TABLE1").appendChild(x); }