HTML DOM TableHeader colSpan Property
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
Last Updated :
24 Aug, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...