Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Column span Property
The HTML DOM Column span property is associated with the colspan attribute inside the <td> element in the HTML. Using the colSpan property we can set or return the colspan attribute of a table. The colspan attribute is used to create the no. of columns that a table should span to.
Syntax
Following is the syntax for −
tabledataObject.colSpan = number
Here, number represents the number of columns the table should span to.
Example
Let us see an example for the colSpan property −
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid blue;
}
</style>
</head>
<body>
<h2>Monthly Savings</h2>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="changeSpan()">CHANGE</button>
<script>
var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
for(var i=0;i<=x;i++){
document.getElementsByClassName("TD1")[i].colSpan = "1";
}
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking CHANGE −
In the above example −
We have taken a table where the first elements beginning from second row i.e. January and February are having colspan equals 2. This makes the table having three rows and three columns. The table has a style applied to it to make it look different from others −
table, th, td {
border: 1px solid blue;
}
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="TD1" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="TD1" colspan="2">February</td>
<td>$100</td>
</tr>
</table>We have then created the CHANGE button that will execute changeSpan() method when clicked upon by the user −
<button onclick="changeSpan()">CHANGE</button>
The changeSpan() method gets both the <div> elements using getElementsByClassName() method on the document object and using indexing to access both of them. It then gets the colSpan attribute value of both the <div> elements and changes them from 2 to 1 −
var x=document.getElementsByClassName("TD1").length;
function changeSpan() {
for(var i=0;i<=x;i++){
document.getElementsByClassName("TD1")[i].colSpan = "1";
}
}
125 Views
