CSS border-spacing 屬性

CSS border-spacing 屬性的功能是用來設計網頁表格欄位邊框間的距離，僅適用於邊框設置為分離模式的情況，所謂的表格邊框分離模式可以透過「border-collapse:separate;」來設置，範例中會提到。CSS border-spacing 屬性的效果與 HTML 表格的 cellspacing 類似，不過可以控制的範圍更廣泛，就像範例這樣，我們可以控制水平或垂直的表格欄位間距離，不過 HTML 的 cellspacing 就沒辦法這樣子將水平與垂直方向的欄位距離分開設計，這也是 CSS 比 HTML 更進化的地方，接著來看看 CSS border-spacing 屬性的語法規則。

CSS border-spacing 屬性語法規則

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

CSS border-spacing 屬性基本語法的參數共有兩個，第一個是控制表格欄位水平間的距離，第二個則是控制表格欄位垂直間的距離，單位可以使用 px、cm 這些標準的 css 長度單位，不過建議使用 px 通用單位。兩個參數不一定都要寫出來，如果只寫一個，代表無論是水平距離或垂直距離都一樣，這樣的效果與 HTML 的 cellspacing 屬性效果相同，如果要將表格欄位的水平距離與垂直距離分開設計，則須同時使用第一段提到的「border-collapse:separate;」效果，避免部分的瀏覽器不支援。另外，並非所有的瀏覽器都支援 CSS border-spacing 屬性，特別是部分版本的 IE 瀏覽器，版本較舊的 IE 瀏覽器幾乎都不支援 CSS border-spacing 屬性的效果，反而對 HTML cellspacing 屬性支援較好，這裡提供各位 HTML cellspacing 屬性的語法規則，有時間的話，建議還是參考一下。

HTML Table cellspacing 屬性

接著我們準備了幾個 CSS border-spacing 的實際應用範例給各位參考。

CSS border-spacing 屬性範例一、水平與垂直間的距離相同

範例呈現的效果

表格欄位	表格欄位
表格欄位	表格欄位

範例一僅設計出表格欄位水平與垂直間的距離都相同的效果，這裡給出的距離為 10px，我們可以看到除了欄位間有 10px 的距離之外，其實表格周邊欄位與表格邊框間的距離也同樣有 10px 的距離，這就是 css border-spacing 的效果。

CSS border-spacing 屬性範例二、水平與垂直間的距離不同

範例呈現的效果

表格欄位	表格欄位
表格欄位	表格欄位

範例二比較特別一點，因為我們增加了「border-collapse:separate;」屬性的效果，同時也使用 border-spacing 的兩個參數值，讓表格欄位水平間的距離有 40px 的距離，垂直欄位間則有 10px 的距離，同方向間與表格邊框的距離都是比照辦理。範例二的效果是原始 HTML 的表格 cellspacing 屬性做不到的效果，有的時候還蠻好用的唷！

➤延伸研究 border-collapse 屬性，請參閱：CSS border-collapse 屬性

更多表格設計的技巧