HTML DOM TableHeader colSpan Property
Last Updated :
24 Aug, 2022
The HTML DOM TableHeader colSpan property is used to set or return the value of the colspan attribute. The colspan attribute defines the number of columns that a header cell should span.
Syntax:
- It returns the colSpan property.
tableheaderObject.colSpan
- It is used to set the colSpan property.
tableheaderObject.colSpan = number
Property Values: It contains a single value i.e numeric which represents the number of columns that a header cell should span.
Return Value: It returns a numeric value that represents the number of columns.
Example 1: This example returns a colSpan property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table{
border:3px solid black;
}
td{
border: 1px solid green;
}
</ style >
</ head >
< body >
< h2 >GeeksforGeeks</ h2 >
< b >DOM TableHeader colSpan property</ b >
< br />< br />
< table >
< tr >
< th id = "tableHeaderID" colspan = "2" >
User Expense
</ th >
</ tr >
< tr >
< td >Arun</ td >
< td >$10</ td >
</ tr >
< tr >
< td >Priya</ td >
< td >$8</ td >
</ tr >
< tr >
< td >Tom</ td >
< td >$18</ td >
</ tr >
</ table >
< br >
< button onclick = "myGeeks()" >
Click to get number of columns
</ button >
< p id = "paraID"
style="font-size:25px;
color:green">
</ p >
< script >
function myGeeks() {
var tab = document.getElementById(
"tableHeaderID").colSpan;
document.getElementById(
"paraID").innerHTML = tab;
}
</ script >
</ body >
</ html >
|
Output:
colSpan property
Example 2: Below code is used to set the colSpan property.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
table
{
border: 2px solid black;
}
td {
border: 1px solid green;
}
</ style >
</ head >
< body >
< h2 >GeeksforGeeks</ h2 >
< b >DOM TableHeader colSpan Property</ b >
< br />< br />
< table >
< tr >
< th id = "tableHeaderID" colspan = "2" >
User Expense
</ th >
</ tr >
< tr >
< td >Arun</ td >
< td >$10</ td >
</ tr >
< tr >
< td >Priya</ td >
< td >$8</ td >
</ tr >
< tr >
< td >Tom</ td >
< td >$18</ td >
</ tr >
</ table >
< br >
< button onclick = "myGeeks()" >
Click to get value of colspan
</ button >
< p id = "paraID"
style="font-size:20px;
color:green">
</ p >
< script >
function myGeeks() {
var tab = document.getElementById(
"tableHeaderID").colSpan="4";
document.getElementById(
"paraID").innerHTML =
"The value of the colspan attribute was changed to: "
+ tab;
}
</ script >
</ body >
</ html >
|
Output:
colSpan property
Supported Browsers:
- Google chrome
- Edge
- Mozilla Firefox
- Opera
- Safari
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...