HTML | DOM ColumnGroup Object
The ColumnGroup Object in HTML DOM is used to represent the HTML < colgroup > element.
This tag is used to set or get the properties of <colgroup> element. It can be accessed by using getElementById() method.
Syntax:
document.getElementById("ColGroup_ID");This ColGroup_ID is assigned to HTML < colgroup > element.
Property Value:
- span: Used to set or return the value of the span attribute.
Example-1: Returning “ColumnGroup id” using document.getElementById(“myColGroup”).id;
html
<!DOCTYPE html><html><head> <title> HTML | DOM ColumnGroup Object </title></head><style> #myColGroup { background: green; } table { color: white; margin-left: 180px; background: yellow; } #Geek_p { color: green; font-size: 30px; } td { padding: 10px; }</style><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>HTML | DOM ColumnGroup Object</h2> <table> <colgroup id="myColGroup" span="2"> </colgroup> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr> <td>Geek_1</td> <td>GeekForGeeks</td> <th>Geek_id_1</th> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> <th>Geek_id_2</th> </tr> </table> <br> <button onclick="myGeeks()"> Click </button> <h4> <p id="Geek_p" style="color:green"></p> </h4> <script> function myGeeks() { // access ColumnGroup element var x = document.getElementById("myColGroup").id; document.getElementById("Geek_p").innerHTML = x; } </script></body></html> |
Output:
- Before clicking on the button:
- After clicking on the button:
Example-2: Returning number of span element from “colgroup id” using document.getElementById(“myColGroup”).span;
html
<!DOCTYPE html><html><head> <title> HTML | DOM ColumnGroup Object </title></head><style> #myColGroup { background: green; } table { color: white; margin-left: 180px; background: yellow; } #Geek_p { color: green; font-size: 30px; } td { padding: 10px; }</style><body style="text-align:center;"> <h1 style="color:green;"> GeeksForGeeks </h1> <h2>HTML | DOM ColumnGroup Object</h2> <table> <colgroup id="myColGroup" span="2"> </colgroup> <tr> <th>S.No</th> <th>Title</th> <th>Geek_id</th> </tr> <tr> <td>Geek_1</td> <td>GeekForGeeks</td> <th>Geek_id_1</th> </tr> <tr> <td>Geek_2</td> <td>GeeksForGeeks</td> <th>Geek_id_2</th> </tr> </table> <br> <button onclick="myGeeks()"> Click </button> <h4> <p id="Geek_p" style="color:green"></p> </h4> <script> function myGeeks() { // access ColumnGroup element var x = document.getElementById("myColGroup").span; document.getElementById("Geek_p").innerHTML = x; } </script></body></html> |
Output
- Before clicking on the button:
- After clicking on the button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Safari
- Opera
Please Login to comment...