HTML Table rowspan 屬性

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

HTML Table 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 的欄位	表格欄位

範例二與範例一不同的地方在於這次的表格有三列，我們要合併的是第二列，一次合併兩行，所以要把 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 屬性》搭配在一起設計，可以讓表格千變萬化。

更多表格設計技巧