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 −

PropertyDescription
spanSets 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);
}
raja
Published on 07-Aug-2019 14:16:19
Advertisements