在設計表格時,有時需要將兩個或更多的相鄰單元格組合成一個單元格,經常使用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是怎麼實現的,沒關系,自己在在線代碼測試工具中多嘗試自己寫幾下就會了。不會也沒關系,以後回來這裡查看就行。