HTML中表格的單元格（水平或垂直方向）合併
阿新 • • 發佈：2019-02-07
<!DOCTYPE html> <html> <meta charset="utf-8"> <head>表格合併（水平和垂直方向）</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>
