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
How to merge table cells in HTML?
We use the colspan and rowspan attributes to merge cells in HTML tables. The rowspan attribute specifies the number of rows a cell should span vertically, whereas the colspan attribute specifies the number of columns a cell should span horizontally.
These attributes should be placed inside the <td> tag or <th> tag to merge table cells and create more complex table layouts.
Syntax
Following is the syntax for the rowspan attribute to merge rows −
<td rowspan="number">cell data</td>
Following is the syntax for the colspan attribute to merge columns −
<td colspan="number">cell data</td>
Here, number represents how many rows or columns the cell should span.
Using Rowspan Attribute
The rowspan attribute allows a cell to extend across multiple rows. When a cell uses rowspan="2", it occupies space in the current row and the next row below it.
Example
Following example demonstrates merging row cells using the rowspan attribute −
<!DOCTYPE html>
<html>
<head>
<title>Rowspan Example</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Table with Rowspan</h2>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Job Role</th>
</tr>
<tr>
<td>Tharun</td>
<td rowspan="2">Content Writer</td>
</tr>
<tr>
<td>Akshaj</td>
</tr>
</table>
</body>
</html>
The output shows the "Content Writer" cell spanning across two rows −
????????????????????????????? ?First Name ? Job Role ? ????????????????????????????? ? Tharun ? ? ????????????? Content Writer? ? Akshaj ? ? ?????????????????????????????
Using Colspan Attribute
The colspan attribute allows a cell to extend across multiple columns. When a cell uses colspan="2", it occupies space in the current column and the next column to its right.
Example
Following example demonstrates merging column cells using the colspan attribute −
<!DOCTYPE html>
<html>
<head>
<title>Colspan Example</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Employee Table with Colspan</h2>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Role</th>
</tr>
<tr>
<td colspan="2">Tharun Chandra</td>
<td>Content Writer</td>
</tr>
<tr>
<td colspan="2">Akshaj Vank</td>
<td>Content Writer</td>
</tr>
</table>
</body>
</html>
The output shows the name cells spanning across two columns −
??????????????????????????????????????? ?First Name?Last Name ? Job Role ? ??????????????????????????????????????? ? Tharun Chandra ?Content Writer ? ??????????????????????????????????????? ? Akshaj Vank ?Content Writer ? ???????????????????????????????????????
Combining Rowspan and Colspan
You can use both rowspan and colspan attributes together in the same table to create more complex layouts. This is useful for creating headers that span multiple rows and columns, or for organizing related data.
Example
Following example demonstrates using both rowspan and colspan in the same table −
<!DOCTYPE html>
<html>
<head>
<title>Combined Rowspan and Colspan</title>
<style>
table, tr, th, td {
border: 1px solid black;
border-collapse: collapse;
padding: 8px;
text-align: center;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Company Employee Directory</h2>
<table style="width: 100%;">
<tr>
<th>First Name</th>
<th>Job Role</th>
<th>Department</th>
</tr>
<tr>
<td>Tharun</td>
<td rowspan="2">Content Writer</td>
<td rowspan="2">Marketing</td>
</tr>
<tr>
<td>Akshaj</td>
</tr>
<tr>
<td colspan="3">Welcome to TutorialsPoint</td>
</tr>
</table>
</body>
</html>
The output shows cells spanning both rows and columns in the same table −
???????????????????????????????????????? ?First Name ? Job Role ? Department ? ???????????????????????????????????????? ? Tharun ? ? ? ?????????????Content Writer? Marketing ? ? Akshaj ? ? ? ???????????????????????????????????????? ? Welcome to TutorialsPoint ? ????????????????????????????????????????
Common Use Cases
Cell merging is commonly used in the following scenarios −
Table headers − Creating headers that span multiple columns or rows to group related data.
Summary rows − Adding total or summary information that spans the entire width of a table.
Data grouping − Organizing related information under common categories or sections.
Complex layouts − Creating forms or structured data displays with varying column widths.
Key Points
When a cell uses
rowspanorcolspan, you must omit the corresponding cells in subsequent rows or columns.The
79K+ Views
