Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- 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);
}
132 Views
