webdevlinux - logo Web Dev Linux

HTML Table Vertical merge

Vertical merge is used to join adjacent table cells in a single column. In this chapter, You will see how to merge table cells vertically.

Table vertical merge Table rowspan

Try the example below.

FILE : table-vertical-merge.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Merge cells vertically</title>
</head>
<body>
<table border="1">
	<tr>
		<th>Time</th>	
		<th>Week days</th>	
		<th>Saturday</th>	
		<th>Sunday</th>	
	</tr>
	<tr>
		<td>20:00-22:00</td>
		<td rowspan="2">Sleep</td>
		<td>Watch TV</td>
		<td>Watch TV</td>
	</tr>
	<tr>
		<td>22:00-00:00</td>
		<td>Watch a Movie</td>
		<td>Sleep</td>
	</tr>
</table>
</body>
</html>

Explanation

Take a look at the explanation of an attribute used in the example.

rowspan="2"
We use the rowspan attribute on the element td to merge vertically. Attribute value represents the number of cells to be merged.