HTML td colspan 屬性詳解：跨列合併儲存格的關鍵技巧

什麼是 colspan？

在 HTML 表格中，<td> 代表一個標準儲存格。當需要讓某個儲存格橫跨多欄顯示時，使用 colspan 屬性。例如 <td colspan="2"> 表示該儲存格佔據兩欄的寬度，相當於 Excel 中的「合併儲存格」功能。

實戰範例

<table border="1" width="60%">
  <tr>
    <td>輸入姓名</td>
    <td><input type="text" name="username" /></td>
  </tr>
  <tr>
    <td colspan="2"><input type="submit" value="註冊"></td>
  </tr>
</table>

上例中，「註冊」按鈕所在的儲存格設定 colspan="2"，使其橫跨「標籤欄」與「輸入欄」兩欄，版面更美觀。

對應屬性：rowspan

若需垂直跨列合併，使用 rowspan。例如 <td rowspan="3"> 讓儲存格佔據三列高度。

注意事項

• 合併後，該列其他儲存格數量需相應減少，否則表格結構會錯位。
• 過度使用合併可能影響無障礙閱讀器解析，建議搭配 scope 屬性或 <th> 語意化標籤。

熟練運用 colspan 與 rowspan，能輕鬆實現複雜表格版面，提升資料呈現清晰度。