在設計表格時,有時需要將兩個或更多的相鄰單元格組合成一個單元格,經常使用word的人都會操作過。在HTML中,這就需要用到“表格合並行”和“表格合並列”。
合並行使用td標簽的rowspan屬性,而合並列則用到td標簽的colspan屬性。在這一節,我們先來學習合並行rowspan屬性。
語法:
<td rowspan="跨度的行數">
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>合並行rowspan</title> </head> <body> <table> <!--第1行--> <tr> <td>姓名:</td> <td>小明</td> </tr> <!--第2行--> <tr> <td rowspan="2">喜歡水果:</td> <td>蘋果</td> </tr> <!--第3行--> <tr> <td>香蕉</td> </tr> </table> </body> </html>
在浏覽器預覽效果如下:
分析:
對於單元格“<td>喜歡水果:</td>”,如果我們沒有加上rowspan="2",在浏覽器預覽效果就變成下面那樣:
可能大家一時半會沒有琢磨透合並行rowspan是怎麼實現的,沒關系,自己在在線代碼測試工具中多嘗試自己寫幾下就會了。不會也沒關系,以後回來這裡查看就行。