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 to set border -->
<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 to return TableHeader colSpan Property -->
<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 to set border -->
<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 to set TableHeader colSpan Property -->
<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