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
Set the number of columns to span in HTML
The colspan attribute in HTML allows you to set the number of columns that a table cell should span. This enables a single <td> or <th> element to stretch across multiple columns, similar to the "merge cells" feature in spreadsheet applications like Excel.
The colspan attribute is essential for creating complex table layouts where certain cells need to occupy more horizontal space than others, such as headers that span across multiple data columns or summary rows that extend across the entire table width.
Syntax
Following is the syntax for the colspan attribute −
<td colspan="number">Content</td> <th colspan="number">Content</th>
Here, number is a positive integer specifying how many columns the cell should span. The default value is 1, meaning the cell spans only one column.
Basic Table with Colspan
The most common use of colspan is in table layouts where you need cells to span multiple columns for better organization and presentation.
Example
Following example demonstrates using colspan in a simple table −
<!DOCTYPE html>
<html>
<head>
<title>Colspan Example</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body style="padding: 20px;">
<table>
<tr>
<th>NAME</th>
<th>AMOUNT</th>
</tr>
<tr>
<td>Surya</td>
<td>143</td>
</tr>
<tr>
<td>Karthik</td>
<td>420</td>
</tr>
<tr>
<td colspan="2">Total Amount: 563</td>
</tr>
</table>
</body>
</html>
The output displays a table where the last row spans across both columns to show the total −
+--------+--------+ | NAME | AMOUNT | +--------+--------+ | Surya | 143 | +--------+--------+ | Karthik| 420 | +--------+--------+ | Total Amount: 563| +------------------+
Multi-Column Header with Colspan
Colspan is commonly used to create headers that span multiple columns, providing better organization for grouped data.
Example
Following example shows a table with multi-level headers using colspan −
<!DOCTYPE html>
<html>
<head>
<title>Multi-Column Header</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: center;
}
th {
background-color: #4CAF50;
color: white;
}
.subheader {
background-color: #45a049;
}
</style>
</head>
<body style="padding: 20px;">
<table>
<tr>
<th rowspan="2">Student</th>
<th colspan="3">Exam Scores</th>
</tr>
<tr>
<th class="subheader">Math</th>
<th class="subheader">Science</th>
<th class="subheader">English</th>
</tr>
<tr>
<td>Alice</td>
<td>85</td>
<td>92</td>
<td>78</td>
</tr>
<tr>
<td>Bob</td>
<td>90</td>
<td>87</td>
<td>95</td>
</tr>
</table>
</body>
</html>
The table shows a main header "Exam Scores" spanning three columns, with individual subject headers below it.
Complex Table Layout with Multiple Colspan Values
You can use different colspan values within the same table to create sophisticated layouts with varying cell widths.
Example
Following example demonstrates a table with varying colspan values −
<!DOCTYPE html>
<html>
<head>
<title>Complex Table Layout</title>
<style>
table {
border-collapse: collapse;
width: 100%;
font-family: Arial, sans-serif;
}
th, td {
border: 1px solid #ddd;
padding: 12px;
text-align: center;
}
th {
background-color: #f8f9fa;
font-weight: bold;
}
.highlight {
background-color: #e7f3ff;
}
</style>
</head>
<body style="padding: 20px;">
<table>
<tr>
<th colspan="4">Sales Report - Q1 2024</th>
</tr>
<tr>
<th>Product</th>
<th>January</th>
<th>February</th>
<th>March</th>
</tr>
<tr>
<td>Laptops</td>
<td>250</td>
<td>300</td>
<td>275</td>
</tr>
<tr>
<td>Phones</td>
<td>180</td>
<td>220</td>
<td>195</td>
</tr>
<tr class="highlight">
<td>Total Units</td>
<td colspan="3">1,420 units sold</td>
</tr>
</table>
</body>
</html>
The table uses colspan="4" for the main header and colspan="3" for the summary row, creating a professional report layout.
Key Points
Following are important points to remember when using the colspan attribute −
The
colspanattribute only works with<td>and<th>elements.The value must be a positive integer. A value of 0 is invalid.
When a cell spans multiple columns, you must reduce the number of cells in that row accordingly to maintain proper table structure.
Colspan can be combined with
rowspanto create cells that span both rows and columns.Always ensure that the total number of columns (including spanned columns) is consistent across all rows.
Browser Compatibility
The colspan attribute is supported by all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of HTML since early versions and provides consistent behavior across different platforms.
Conclusion
The colspan attribute is a powerful tool for creating flexible table layouts in HTML. By allowing cells to span multiple columns, it enables you to design professional-looking tables with headers, summaries, and grouped data. Always ensure proper table structure by balancing the number of cells and their colspan values in each row.
618 Views
