HTML Table cellspacing 的 CSS 替代語法

HTML Table cellspacing 的 CSS 替代語法可以用 border-spacing 屬性來達成，所謂的 border-spacing 屬性就是指＂邊框空間＂，可以做到與傳統 HTML 表格的 cellspacing 屬性同樣的效果，而且還能夠更進一步的將表格欄位間的水平距離與垂直距離分開來設計，若要設計無論是水平或垂直間距離都相同的表格欄位，可以直接使用 border-spacing 屬性或傳統的 HTML cellspacing 屬性，若要將水平與垂直方向的欄位邊框空間設計為不同，則必須使用 CSS 的 border-spacing 與 border-collapse 屬性搭配在一起使用，範例會把這兩種效果做出差異。

CSS border-spacing 屬性語法

border-spacing: 表格欄位水平間的距離表格欄位垂直間的距離;

兩個參數若只寫一個，表示表格欄位的水平與垂直間距離都一樣，分開可分別設計水平與垂直間的距離，關於 border-spacing 屬性的用法，請參閱本站另外的這篇介紹內容，有更詳細的語法使用規則與範例。

CSS border-spacing 屬性

以下的範例將呈現 HTML cellspacing 與 CSS border-spacing 的用法與差異。

HTML Table cellspacing 的 CSS 替代語法範例一、原始 cellspacing 效果

<table cellspacing="10" border="1">
<tr><td>使用 cellspacing 後的欄位</td><td>使用 cellspacing 後的欄位</td></tr>
<tr><td>使用 cellspacing 後的欄位</td><td>使用 cellspacing 後的欄位</td></tr>
</table>

呈現的效果

使用 cellspacing 後的欄位	使用 cellspacing 後的欄位
使用 cellspacing 後的欄位	使用 cellspacing 後的欄位

範例一僅是提供原始 HTML Table 的 cellspacing 屬性給各位看，範例這樣「cellspacing="10"」的寫法，表示表格欄位彼此間的水平邊框與垂直邊框間距離都是 10px，cellspacing 的距離單位預設為 px，關於 HTML cellspacing 的用法，請參閱此篇

HTML Table cellspacing 屬性

接著範例二將會用 CSS 的 border-spacing 完全的取代範例一個 HTML Table cellspacing 效果。

HTML Table cellspacing 的 CSS 替代語法範例二、改用 css border-spacing 效果

<table style="border-spacing:10px;" border="1">
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
</table>

呈現的效果

使用 border-spacing 後的欄位	使用 border-spacing 後的欄位
使用 border-spacing 後的欄位	使用 border-spacing 後的欄位

範例二採用 CSS 的 style 宣告樣式，紅色標註的「border-spacing:10px;」即為取代 HTML cellspacing 的效果，僅使用 10px 的參數值，效果等同於範例一的 cellspacing，在下一個範例，將可以看到如何把表格欄位的水平距離與垂直距離分開設計。

HTML Table cellspacing 的 CSS 替代語法範例三、欄位的水平與垂直間距離不同

<table style="border-spacing:20px 5px;border-collapse:separate;" border="1">
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
</table>

呈現的效果

使用 border-spacing 後的欄位	使用 border-spacing 後的欄位
使用 border-spacing 後的欄位	使用 border-spacing 後的欄位

範例三的 CSS 樣式「border-spacing:20px 5px;border-collapse:separate;」意思是表格欄位水平間的邊框距離為 20px，垂直距離為 5px，並搭配上 border-collapse:separate 的效果，告訴瀏覽器要將水平與垂直的距離分開來看，這個 border-collapse 雖然不一定要寫，但為了避免部分的瀏覽器誤判導致失去效果，所以建議還是寫上比較好。

➤學會表格欄位間距離，那表格內部距離呢？看這篇：HTML Table cellpadding 的 CSS 替代語法。

更多表格設計技巧