HTML中合併單元格（水平和垂直）
阿新 • • 發佈：2021-06-11
HTML中合併單元格（水平和垂直）
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<title>表格合併（水平和垂直方向）</title>
</head>
<base target="_self">
<body>
<!--初始表格-->
<table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px">
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>深圳</td>
<td>河北</td>
<td>雄安</td>
</tr>
</table>
<!--水平方向上的合併-->
<br><br><br><br><br>
<table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px">
<tr>
<td colspan="2">北京</td> <!--第一個單元格與第二個單元格合併，colspan="2"意思是第一個單元格的長度改變成兩個單元格的長度，也就是把第一個單元格長度邊長兩倍，第二個單元格的<td></td>刪除。-->
<td>廣州</td>
</tr>
<tr>
<td>深圳</td>
<td>河北</td>
<td>雄安</td>
</tr>
</table>
<br><br><br><br><br>
<table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px">
<tr>
<td>北京</td>
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>深圳</td>
<td colspan="2">河北</td>
</tr>
</table>
<br><br><br><br><br>
<!--垂直方向上的單元格合併-->
<table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px">
<tr>
<td rowspan="2">北京</td><!--第一個單元格垂直方向上合併，改變第一個單元格在垂直方向上的長度，變成原先的兩倍，但是表格的高度和長度不變，所以要刪除深圳所在的單元格（rowspan="2"意思是第一個單元格現在的長度等於原先兩個單元格的長度）-->
<td>上海</td>
<td>廣州</td>
</tr>
<tr>
<td>廣州</td>
<td>雄安</td>
</tr>
</table>
<br><br><br><br><br>
<table align="center" border="1" cellpadding="2" cellspacing="2" width="300px" height="100px">
<tr>
<td>北京</td>
<td>上海</td>
<td rowspan="2">廣州</td>
</tr>
<tr>
<td>深圳</td>
<td>河北</td>
</tr>
</table>
</body>
</html>