HTML | DOM TableData colSpan Property
The Dom TableData colSpan Property in HTML DOM is used to set or return the value of a colspan attribute. The colspan attribute is used to specify the number of columns a table should span.
Syntax:
- It returns the colSpan property.
tabledataObject.colSpan
- It is used to set the colSpan property.
tabledataObject.colSpan = number
Property Values: It contains the numeric value which specifies the number of columns a cell should span.
Return Value: It returns a numeric value that represents the number of columns that a cell should span.
Example-1: This Example returns a colspan Property.
HTML
<!DOCTYPE html> < html > < head > < style > table, th, td { border: 1px solid green; } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > DOM TableData Colspan Property </ h2 > < table > < tr > < td id = "myTd" colspan = "3" > Beginner </ td > < td >For</ td > < td >Beginner</ td > </ tr > </ table > < br > < button onclick = "myFunction()" > Click Here! </ button > < p id = "demo" style="font-size:24px; colorgreen;"> </ p > < script > function myFunction() { // return Table data colSpan Property var x = document.getElementById( "myTd").colSpan; document.getElementById("demo").innerHTML = x; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example sets the colspan Property.
HTML
<!DOCTYPE html> < html > < head > < style > table, th, td { border: 1px solid green; } </ style > </ head > < body > < h1 style = "color:green;" > w3wiki </ h1 > < h2 > DOM TableData Colspan Property </ h2 > < table > < tr > < td id = "myTd" colSpan = "3" > Beginner </ td > < td >For</ td > < td >Beginner</ td > </ tr > </ table > < br > < button onclick = "myFunction()" > Click Here! </ button > < p id = "demo" style="font-size:24px; colorgreen;"> </ p > < script > function myFunction() { // set Table data colSpan Property var x = document.getElementById("myTd").colSpan = "5"; document.getElementById("demo").innerHTML = "The value of the Colspan " + "attribute was changed to " + x; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers:
- Google Chrome
- Mozilla Firefox
- Edge
- Opera
- Safari