HTML | DOM TableData colSpan Property
Last Updated :
23 Aug, 2022
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;" >
GeeksForGeeks
</ h1 >
< h2 >
DOM TableData Colspan Property
</ h2 >
< table >
< tr >
< td id = "myTd" colspan = "3" >
Geeks
</ td >
< td >For</ td >
< td >Geeks</ 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;" >
GeeksForGeeks
</ h1 >
< h2 >
DOM TableData Colspan Property
</ h2 >
< table >
< tr >
< td id = "myTd" colSpan = "3" >
Geeks
</ td >
< td >For</ td >
< td >Geeks</ 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
Share your thoughts in the comments
Please Login to comment...