March 18, 2024
How can I merge columns and rows in table?Using Colspan and Rowspan can merge the columns and rows easily in the table.
Colspan
Colspan can merge two or more columns in HTML. We need only the colspan attribute for this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Table</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Roll no.</th>
<th colspan="2">Full name of Student </th>
<th>Total Marks</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1 </td>
<td> Mark </td>
<td> Dyol</td>
<td> 99 </td>
</tr>
<tr>
<td> 2 </td>
<td> John </td>
<td> Smith </td>
<td> 95 </td>
</tr>
<tr>
<td> 3 </td>
<td> Remi </td>
<td> Snap </td>
<td> 98 </td>
</tr>
</tbody>
</table>
</body>
</html>
Output:
Add the number of lines in colspan=" " according to the number of columns you want to merge data.
Rowspan
Rowspan can merge two or more rows in HTML. We need only the rowspan attribute for this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Table</title>
</head>
<body>
<table border="1">
<tr>
<th colspan="4"> Time Table </th>
</tr>
<tr>
<th>Time</th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
</tr>
<tr>
<td>9:00 AM</td>
<td rowspan="2">Team Meating </td>
<td rowspan="4">Work</td>
<td rowspan="3">Work</td>
</tr>
<tr>
<td>10:00 AM</td>
</tr>
<tr>
<td>11:00 AM</td>
<td rowspan="2">Work</td>
</td>
</tr>
<tr>
<td>12:00 PM</td>
<td rowspan="2">Team Meating</td>
</tr>
<tr>
<td>01:00 PM</td>
<td>Lunch</td>
<td>Lunch</td>
</tr>
</table>
</body>
</html>
Output:
Add the number of lines in rowspan=" " according to the number of rows you want to merge data.