HTML | DOM Column span Property
The DOM Column span Property is used to set or return the value of a span attribute of a <column> element. The colspan attribute in HTML specifies the number of columns a cell should span.
Syntax:
- It is used to return the span property.
columnObject.span
- It is used to set the Column span property.
columnObject.span = number
- number: It specifies the number of the column that a cell should span. It does not allow negative values.
- Google Chrome
- Internet Explorer
- Firefox
- Opera
- Safari
Property Values:
Return Values: It returns a numeric value which represent the number of columns.
Example-1: This Example that illustrate how to return the column span Property.
<!DOCTYPE html> < html > < head > < title > HTML | DOM Column span Property </ title > </ head > < style > #myCol { background: green; } table { color: white; margin-left: 150px; } #Geek_p { color: green; font-size: 30px; } td { padding: 10px; } </ style > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML | DOM Column span Property</ h2 > < table > < colgroup > < col id = "myCol" span = "2" > < col style = "background-color:green" > </ colgroup > < tr > < th >S.No</ th > < th >Title</ th > < th >Geek_id</ th > </ tr > < tr > < td >Geek_1</ td > < td >GeekForBeginner</ td > < th >Geek_id_1</ th > </ tr > < tr > < td >Geek_2</ td > < td >w3wiki</ td > < th >Geek_id_2</ th > </ tr > </ table > < br > < button onclick = "myBeginner()" > Click </ button > < h4 > < p id = "Geek_p" style = "color:green" > </ p > </ h4 > < script > function myBeginner() { // access col element var x = document.getElementById( "myCol").span; document.getElementById( "Geek_p").innerHTML = x; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking In Button:
Example-2: This HTML Example illustrates how to set the column span Property.
<!DOCTYPE html> < html > < head > < title > HTML | DOM Column span Property </ title > </ head > < style > #gfg { background: green; } table { color: white; margin-left: 150px; } #Geek_p { color: green; font-size: 30px; } td { padding: 10px; } </ style > < body style = "text-align:center;" > < h1 style = "color:green;" > w3wiki </ h1 > < h2 >HTML | DOM Column span Property</ h2 > < table > < colgroup > < col id = "gfg" span = "3" > < col style = "background-color:green" > </ colgroup > < tr > < th >S.No</ th > < th >Title</ th > < th >Geek_id</ th > </ tr > < tr > < td >Geek_1</ td > < td >GeekForBeginner</ td > < th >Geek_id_1</ th > </ tr > < tr > < td >Geek_2</ td > < td >w3wiki</ td > < th >Geek_id_2</ th > </ tr > </ table > < br > < button onclick = "myBeginner()" > Click </ button > < h4 > < p id = "Geek_p" style = "color:green" > </ p > </ h4 > < script > function myBeginner() { // access col element document.getElementById( "gfg").span = 2; document.getElementById("gfg"). style.backgroundColor = "red"; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM Column span Property are listed below: