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
Selected Reading
How to merge table columns in HTML?
To merge table columns in HTML, use the colspan attribute in the <td> or <th> tag. This attribute allows a cell to span across multiple columns, effectively merging them together. The value of colspan specifies how many columns the cell should span.
Syntax
Following is the syntax for merging table columns using the colspan attribute −
<td colspan="number">Content</td> <th colspan="number">Content</th>
Where number represents the number of columns the cell should span across.
Basic Table Structure
Let us first create a basic 3x3 table to understand the structure before applying column merging −
<!DOCTYPE html>
<html>
<head>
<title>Basic Table Structure</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
width: 100px;
height: 50px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Basic 3x3 Table</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Col 1</td>
<td>Row 1, Col 2</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
</table>
</body>
</html>
The output displays a regular 3x3 table with individual cells −
Basic 3x3 Table ??????????????????????????????????????????? ? Header 1 ? Header 2 ? Header 3 ? ??????????????????????????????????????????? ?Row 1, Col 1 ?Row 1, Col 2 ?Row 1, Col 3 ? ??????????????????????????????????????????? ?Row 2, Col 1 ?Row 2, Col 2 ?Row 2, Col 3 ? ???????????????????????????????????????????
Merging Two Columns
To merge two columns, use colspan="2" and reduce the number of cells in that row by one −
<!DOCTYPE html>
<html>
<head>
<title>Merge Two Columns</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
width: 100px;
height: 50px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Table with Merged Columns</h2>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td colspan="2">Merged Cell (Col 1 + Col 2)</td>
<td>Row 1, Col 3</td>
</tr>
<tr>
<td>Row 2, Col 1</td>
<td>Row 2, Col 2</td>
<td>Row 2, Col 3</td>
</tr>
</table>
</body>
</html>
The output shows the first two columns in row 1 merged into a single cell −
Table with Merged Columns ?????????????????????????????????????????? ? Header 1 ? Header 3 ? ?????????????????????????????????????????? ?Merged Cell (Col 1 + Col 2)?Row 1, Col 3 ? ??????????????????????????????????????????? ?Row 2, Col 1 ?Row 2, Col 2 ?Row 2, Col 3 ? ???????????????????????????????????????????
Merging All Columns
You can merge all columns in a row by setting colspan equal to the total number of columns −
<!DOCTYPE html>
<html>
<head>
<title>Merge All Columns</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
width: 100px;
height: 50px;
text-align: center;
}
.full-width {
background-color: #f0f8ff;
font-weight: bold;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Table with Full-Width Merged Cell</h2>
<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Laptop</td>
<td>$999</td>
<td>5</td>
</tr>
<tr>
<td colspan="3" class="full-width">Total Items: 5 | Grand Total: $4,995</td>
</tr>
</table>
</body>
</html>
The output displays a table with the last row spanning all three columns −
Table with Full-Width Merged Cell ?????????????????????????????? ? Product ? Price ? Quantity ? ?????????????????????????????? ? Laptop ? $999 ? 5 ? ?????????????????????????????? ? Total Items: 5 | Grand Total: $4,995 ? (light blue background) ????????????????????????????????????????
Complex Column Merging
You can create more complex table layouts by combining different colspan values in multiple rows −
<!DOCTYPE html>
<html>
<head>
<title>Complex Column Merging</title>
<style>
table {
border: 1px solid black;
border-collapse: collapse;
width: 400px;
}
th, td {
border: 1px solid black;
height: 40px;
text-align: center;
padding: 5px;
}
.header { background-color: #e6f3ff; font-weight: bold; }
.total { background-color: #f0f8e6; font-weight: bold; }
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Sales Report Table</h2>
<table>
<tr>
<th colspan="4" class="header">Monthly Sales Report</th>
</tr>
<tr>
<th>Item</th>
<th>Q1</th>
<th>Q2</th>
<th>Total</th>
</tr>
<tr>
<td>Phones</td>
<td>150</td>
<td>200</td>
<td>350</td>
</tr>
<tr>
<td>Tablets</td>
<td>80</td>
<td>120</td>
<td>200</td>
</tr>
<tr>
<td colspan="3" class="total">Grand Total</td>
<td class="total">550</td>
</tr>
</table>
</body>
</html>
The output shows a complex table with merged headers and footer cells −
Sales Report Table ?????????????????????????????????????????? ? Monthly Sales Report ? (light blue background) ?????????????????????????????????????????? ? Item ? Q1 ? Q2 ? Total ? ?????????????????????????????????????????? ? Phones ? 150 ? 200 ? 350 ? ?????????????????????????????????????????? ? Tablets ? 80 ? 120 ? 200 ? ?????????????????????????????????????????? ? Grand Total ? 550 ? (light green background) ??????????????????????????????????????????
Updated on: 2026-03-16T21:38:53+05:30
68K+ Views
Advertisements