HTML Table colspan 屬性

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

HTML Table 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>

範例結果

我們準備了三個使用 colspan 的表格範例，第一個表格的第一行 td 標籤內，使用了「colspan="2"」讓第一行橫跨兩個欄位，同樣的概念在第二個表格中，讓第一行橫跨三個欄位，第三個表格則是修改第二行的欄位，HTML colspan 可以用在不同行。範例中語法 style 開始的部分是 CSS 的設計語法，只是用來讓範例比較清楚，例如加上邊框的顏色、讓文字置中等，有興趣可以看這幾則介紹。

➤每個範例中的表格都有 cellpadding 是做什麼用的呢？這篇幫您解答：HTML Table cellpadding 屬性。
➤若您想作的效果是合併垂直方向的欄位，也就是表格多行合併，請參閱：HTML Table rowspan 屬性。

更多表格設計技巧