HTML Table colspan 屬性

HTML Table colspan 屬性的功能是用來讓表格欄位(td)橫跨多列(columns),效果類似 Microsoft word 或 OpenOffice writer 中"合併儲存格"的效果,colspan 僅能用在 Table 的 td 標籤內,用於其他的標籤內無效。colspan 屬性是 HTML 表格的基本屬性,所有主流的瀏覽器都支援這個屬性的效果,與 colspan 相對應的為 rowspan 屬性。

HTML Table colspan 屬性語法
<td colspan="要橫跨的列數">
colspan 語法中"要橫跨的列數"是數字,橫跨最多不可超過表格最多列,例如表格本身僅有 5 列,則 colspan 不可以大於 5,雖然 colspan 大於所有欄位數目並不會怎麼樣,頂多就是橫跨到最多列,不過有些瀏覽器可能會誤判,造成表格錯亂,所以還是要避免。

HTML Table colspan 屬性範例
<table border="1" cellpadding="5" style="border:2px #26FF26 solid;text-align:center;">
<tr><td colspan="2">使用了 colspan 的欄位</td></tr>
<tr><td>表格欄位</td><td>表格欄位</td></tr>
</table>

<table border="1" cellpadding="5" style="border:2px #FFB326 solid;text-align:center;">
<tr><td colspan="3">使用了 colspan 的欄位</td></tr>
<tr><td>表格欄位</td><td>表格欄位</td><td>表格欄位</td></tr>
</table>

<table border="1" cellpadding="5" style="border:2px #00DBDB solid;text-align:center;">
<tr><td>表格欄位</td><td>表格欄位</td><td>表格欄位</td></tr>
<tr><td colspan="5">使用了 colspan 的欄位</td></tr>
</table>
範例結果
HTML Table colspan 效果範例
我們準備了三個使用 colspan 的表格範例,第一個表格的第一行 td 標籤內,使用了「colspan="2"」讓第一行橫跨兩個欄位,同樣的概念在第二個表格中,讓第一行橫跨三個欄位,第三個表格則是修改第二行的欄位,HTML colspan 可以用在不同行。範例中語法 style 開始的部分是 CSS 的設計語法,只是用來讓範例比較清楚,例如加上邊框的顏色、讓文字置中等,有興趣可以看這幾則介紹。
每個範例中的表格都有 cellpadding 是做什麼用的呢?這篇幫您解答:HTML Table cellpadding 屬性
若您想作的效果是合併垂直方向的欄位,也就是表格多行合併,請參閱:HTML Table rowspan 屬性

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