HTML Table rowspan 屬性

HTML Table rowspan 屬性的功能是用來合併多個列(row),rowspan 可以將表格的兩行合併為一行,也可以一次合併多行,其功能類似 Microsoft word 或 OpenOffice writer 中"垂直合併儲存格"的效果,有了 rowspan 可以讓 HTML 表格有無限的變化。與 colspan 一樣的是 rowspan 也只能用在 HTML 表格的 td 標籤內,用在其他地方沒有效果,所有主流的瀏覽器均支援 HTML Table rowspan 屬性的效果。

HTML Table rowspan 屬性語法
<td rowspan="要合併的行數">
rowspan 的參數值"要合併的行數"必須小於或等於等個表格的行數,例如一個表格僅有 5 行,rowspan 最多就只能是 rowspan="5"。同一個 HTML 表格可以有許多不同的欄位使用 rowspan 屬性,以下是幾個使用了 rowspan 的表格範例。

HTML Table rowspan 屬性範例一、表格左邊合併兩行
<table border="1" cellpadding="5" style="border:2px #26FF26 solid;text-align:center;">
<tr><td rowspan="2">使用 rowspan 的欄位</td><td>表格欄位</td></tr>
<tr><td>表格欄位</td></tr>
</table>
呈現效果
使用 rowspan 的欄位表格欄位
表格欄位
範例的重點在表格的第一行 <td> 標籤中使用了「rowspan="2"」的語法,意思是第一列要合併兩行,這樣的情況下,設計師要記得讓表格至少有兩行存在,也就是至少要有兩組 <tr> 標籤,第二組 <tr> 標籤內僅需有一組 <td> 標籤即可,rowspan 會自動將第一列的兩行合併為一行,如果表格的行標籤(<tr>)以及列標籤(<td>)數量不對,rowspan 就會出錯,所以設計師們請自行算好該有的行列數量,若您對 HTML 表格的設計規則或 CSS 的基本語法還不熟悉,這裡有幾篇可以閱讀。
接著我們用 rowspan 開始替其他列進行合併的動作。

HTML Table rowspan 屬性範例二、表格中間合併兩行
<table border="1" cellpadding="5" style="border:2px #FFB326 solid;text-align:center;margin:15px 0px;">
<tr><td>表格欄位</td><td rowspan="2">使用 rowspan 的欄位</td><td>表格欄位</td></tr>
<tr><td>表格欄位</td><td>表格欄位</td></tr>
</table>
呈現效果
表格欄位使用 rowspan 的欄位表格欄位
表格欄位表格欄位
範例二與範例一不同的地方在於這次的表格有三列,我們要合併的是第二列,一次合併兩行,所以要把 rowspan="2" 寫在第二列的列標籤(<td>)內。第二行(第二組 <tr> 標籤)僅需要有兩行(兩組 <td> 標籤)即可,rowspan 會自動讓第二列佔有兩行的空間,等於是中間的那列的兩行合併為一個大行。

HTML Table rowspan 屬性範例一、表格右邊合併兩行
<table border="1" cellpadding="5" style="border:2px #00DBDB solid;text-align:center;">
<tr><td>表格欄位</td><td rowspan="2">使用 rowspan 的欄位</td></tr>
<tr><td>表格欄位</td></tr>
</table>
呈現效果
表格欄位使用 rowspan 的欄位
表格欄位
範例三與範例一都是兩列的表格,這次我們要合併的是右邊的列,一次合併兩行成為一個大行,所以只要在第一行(第一組 <tr> 標籤)的第二個列(<td>)內使用 rowspan="2" 即可。有人可能會想問,如果把範例三包含 rowspan="2" 的整組列標籤,改寫在第二行可以嗎?答案是不可以,rowspan 屬性的特性是由上往下合併,若寫在第二行,rowspan 並不會自動向上合併。

HTML Table rowspan 並沒有特別限制一次所能合併的行數,若與《HTML Table colspan 屬性》搭配在一起設計,可以讓表格千變萬化。

更多表格設計技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012