Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM TableData colSpan Property
The HTML DOM TableData colSpan property returns and modifies the value of the colspan attribute of a table cell (<td> or <th>) in an HTML document. This property controls how many columns a cell spans across in a table.
Syntax
Following is the syntax for returning the colSpan property −
object.colSpan
Following is the syntax for setting the colSpan property −
object.colSpan = number
Property Values
The colSpan property accepts a numeric value that specifies how many columns the cell should span. The default value is 1, meaning the cell spans only one column. A value of 0 makes the cell span from the current column to the last column of the column group.
Return Value
The colSpan property returns a number representing the current colspan value of the table cell.
Example − Getting and Setting colSpan
Following example demonstrates how to get and set the colSpan property of table cells −
<!DOCTYPE html>
<html>
<head>
<title>DOM TableData colSpan Property</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
padding: 20px;
}
table {
margin: 20px auto;
border-collapse: collapse;
width: 400px;
}
th, td {
border: 1px solid #333;
padding: 10px;
text-align: center;
}
th {
background-color: #f0f0f0;
}
.btn {
background: #007bff;
color: white;
border: none;
padding: 10px 15px;
margin: 5px;
cursor: pointer;
border-radius: 4px;
}
</style>
</head>
<body>
<h2>DOM TableData colSpan Property Demo</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane</td>
<td>28</td>
<td>London</td>
</tr>
</tbody>
<tfoot>
<tr>
<td id="footer-cell">Table Footer</td>
<td>Data</td>
<td>More Data</td>
</tr>
</tfoot>
</table>
<button onclick="spanFooter()" class="btn">Span Footer Across 3 Columns</button>
<button onclick="getColSpan()" class="btn">Get Current ColSpan</button>
<button onclick="resetFooter()" class="btn">Reset Footer</button>
<p id="result"></p>
<script>
function spanFooter() {
document.getElementById('footer-cell').colSpan = 3;
document.getElementById('result').textContent = "Footer cell now spans 3 columns";
}
function getColSpan() {
var colSpanValue = document.getElementById('footer-cell').colSpan;
document.getElementById('result').textContent = "Current colSpan value: " + colSpanValue;
}
function resetFooter() {
document.getElementById('footer-cell').colSpan = 1;
document.getElementById('result').textContent = "Footer cell reset to span 1 column";
}
</script>
</body>
</html>
The output displays a table with three columns. Initially, the footer cell spans only one column. Clicking the buttons demonstrates different colSpan operations −
Name Age City John 25 New York Jane 28 London Table Footer Data More Data (After clicking "Span Footer"): Name Age City John 25 New York Jane 28 London Table Footer (spans all 3 columns) Current colSpan value: 3
Example − Dynamic Column Spanning
Following example shows how to dynamically change column spans based on user input −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic ColSpan Example</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
table {
border-collapse: collapse;
margin: 20px 0;
}
th, td {
border: 2px solid #333;
padding: 8px;
text-align: center;
}
th {
background-color: #e6f3ff;
}
#special-cell {
background-color: #ffeb3b;
font-weight: bold;
}
</style>
</head>
<body>
<h2>Dynamic ColSpan Property</h2>
<table>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
<tr>
<td id="special-cell">Spanning Cell</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
<td>Row 2, Col 4</td>
</tr>
</table>
<label for="spanInput">Enter colSpan value (1-4): </label>
<input type="number" id="spanInput" min="1" max="4" value="1">
<button onclick="changeSpan()">Apply ColSpan</button>
<p id="info">Current colSpan: 1</p>
<script>
function changeSpan() {
var spanValue = document.getElementById('spanInput').value;
var cell = document.getElementById('special-cell');
cell.colSpan = spanValue;
document.getElementById('info').textContent = "Current colSpan: " + cell.colSpan;
}
</script>
</body>
</html>
This example allows users to input different colSpan values and see the cell expand accordingly. The yellow cell will span across the number of columns specified by the user input.
Key Points
The colSpan property accepts numeric values starting from 1.
Setting colSpan to a value greater than 1 makes the cell span across multiple columns.
When a cell spans multiple columns, the cells it spans over may become hidden or pushed to the next row.
The colSpan property works on both
<td>and<th>elements.A colSpan value of 0 spans from the current column to the last column of the column group.
Browser Compatibility
The colSpan property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM specification and has excellent cross-browser compatibility.
Conclusion
The HTML DOM TableData colSpan property provides a convenient way to control how many columns a table cell spans. It is useful for creating complex table layouts with merged cells and can be dynamically modified using JavaScript to create interactive table interfaces.
242 Views
