HTML Table cellspacing 屬性

HTML Table cellspacing 屬性的功能是用來設計表格內＂欄位間的距離＂用的，常常與 cellpadding 搞混，當我們使用了 cellspacing 來增加表格欄位的距離，將會感覺似乎表格的框線條變粗了，其實是因為欄位間彼此的距離加大所造成的視覺效果，HTML 表格預設的欄位間距離很不明顯，若果將表格邊框設為 0 且 cellpadding 也設為 0，就幾乎感受不到表格欄位間的距離，很容易黏在一起，不過如果善用 cellspacing 屬性的效果，搭配上 border 與 cellpadding 屬性，就可以解決這樣的問題。

HTML Table cellspacing 屬性基本語法

cellspacing: 距離值;

這裡所指的距離值就是表格欄位間的距離，預設單位為 px，整個 cellspacing 都要寫在表格開頭的 Table 標籤內才有效果。

備註、cellspacing 屬性也會增加表格欄位與表格邊框間的距離。

HTML Table cellspacing 屬性範例

還沒使用 cellspacing 的表格
<table border="1">
<tr><td>這是測試欄位內容</td><td>這是測試欄位內容</td></tr>
</table>

已經使用 cellspacing 的表格
<table cellspacing="8" border="1">
<tr><td>這是測試欄位內容</td><td>這是測試欄位內容</td></tr>
</table>

呈現效果

還沒使用 cellspacing 的表格

這是測試欄位內容

已經使用 cellspacing 的表格

這是測試欄位內容

為了能夠清楚的顯示出使用了 cellspacing 的效果差異，範例共準備了兩個 HTML 表格，程式碼為一個差異就只有「cellspacing="8"」這個部分，從範例的呈現結果可以看到，表格中兩個欄位間有 8px 的距離，與表格邊框也有 8px 的距離，看起來就像是表格的框線變粗了，其實只是欄位間的距離被加大了而已，這就是 cellspacing 的主要功用。透過這樣的效果，如果搭配上表格背景顏色與邊框樣式的設計，也可以創造出具有特色的網頁表格，這幾篇參考看看。

為了讓表格變得比較漂亮或比較容易閱讀，通常網頁設計師會使用 cellspacing 屬性加上 cellpadding 的搭配在一起設計 HTML 表格，本篇著重於 cellspacing 的講解，建議您閱讀《HTML Table cellpadding 屬性》的內容，了解 cellpadding 這個屬性。

CSS 的 border-spacing 可以做到比 cellspacing 更進階的效果，請參閱：CSS border-spacing 屬性。

更多 HTML 表格設計的技巧