How to merge table cells in HTML?
To merge cells in HTML, use the colspan and rowspan attribute. The rowspan attribute is for the number of rows a cell should span, whereas the colspan attribute is for a number of columns a cell should span.
Both the attribute will be inside the <td> tag. The number will be a numeric value, for example, 2 for 2 rows if rowspan, 2 for 2 columns if column span.
Example
Firstly, we will see how to create a table in HTML with 3 rows and 3 columns
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<table>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>Example
Let’s merge cells using the colspan and rowspan attribute
Live Demo
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
width: 100px;
height: 50px;
}
</style>
</head>
<body>
<h1>Heading</h1>
<table>
<tr>
<th colspan="2"></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
Published on 01-Feb-2018 11:30:47
