In this HTML Tutorial article we will explain the method of merge table cells in HTML using the rowspan and colspan attributes.
To merge cells in HTML tables, you use the rowspan and colspan attributes in the <td> (table data) or <th> (table header) elements.
if you want to learn what is the <td> or <th> in HTML table, then check our this article - > https://tapgen.xyz/tutorial/topic_more/29/HTML+Tables
HTML Table - Merging Cells Horizontally
Colspan attribute specifies & allows you to merge HTML table cells horizontally.
Let's see the example:
<table border="1">
<tr>
<td colspan="3">This cell spans 3 columns</td>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
</table>
Output:
In this example, the first three columns colspan in the first row .
HTML Table - Merging Cells Vertically
To merge rows in a column, you need to use the rowspan attribute in HTML table. When a cell spans multiple rows,use the rowspan attribute.
Here is the example of Rowspan:
<table border="1">
<tr>
<td rowspan="2">This cell spans 2 rows</td>
<td>Cell 2-1</td>
</tr>
<tr>
<td>Cell 2-2</td>
</tr>
</table>
Output:
Here is the full code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 40%;
border-collapse: collapse; /* Ensures borders are merged */
border: 2px solid black; /* Adds a border around the table */
}
th, td {
border: 1px solid black; /* Adds a border to each cell */
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2">This cell spans 2 rows</td>
<td>Cell 2-1</td>
</tr>
<tr>
<td>Cell 2-2</td>
</tr>
</table>
</body>
</html>
In this example, the cell in the first column of the second row spans two rows.
Combining colspan and rowspan
You can use colspan and rowspan together to get a range of various tables
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td rowspan="2" colspan="2">Cell spanning 2 rows and 2 columns</td>
<td>Cell 1</td>
</tr>
<tr>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
This article is helpful for you if your ask is how to merge rows and columns inside HTML tables?
If you have any other questions or need further examples, let us know and upload the question in our forum tapgen.xyz
Learn to code with the world's largest web developer site. Not sure where to begin? HTML is The language for building web pages Learn HTML Tutorial with Tapgen.
=================================