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 表格設計的技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012