webdevlinux - logo Web Dev Linux

HTML Table Horizontal merge

In this chapter, We will see how to use horizontal merge of table cells. Joining two or more adjacent cells together is also named as merge.

Table horizontal merge Table colspan

Try the example below.

FILE : table-horizontal-merge.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Merge cells horizontally</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>Sleep</td>
		<td colspan="2">Watch TV</td>
	</tr>
	<tr>
		<td>22:00-00:00</td>
		<td>Sleep</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.

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