CSS border-spacing 屬性

CSS border-spacing 屬性的功能是用來設計網頁表格欄位邊框間的距離,僅適用於邊框設置為分離模式的情況,所謂的表格邊框分離模式可以透過「border-collapse:separate;」來設置,範例中會提到。CSS border-spacing 屬性的效果與 HTML 表格的 cellspacing 類似,不過可以控制的範圍更廣泛,就像範例這樣,我們可以控制水平或垂直的表格欄位間距離,不過 HTMLcellspacing 就沒辦法這樣子將水平與垂直方向的欄位距離分開設計,這也是 CSSHTML 更進化的地方,接著來看看 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 屬性的語法規則,有時間的話,建議還是參考一下。
接著我們準備了幾個 CSS border-spacing 的實際應用範例給各位參考。

CSS border-spacing 屬性範例一、水平與垂直間的距離相同
<table style="border-spacing:10px;" border="1">
<tr><td>表格欄位</td><td>表格欄位</td></tr>
<tr><td>表格欄位</td><td>表格欄位</td></tr>
</table>
範例呈現的效果
表格欄位表格欄位
表格欄位表格欄位
範例一僅設計出表格欄位水平與垂直間的距離都相同的效果,這裡給出的距離為 10px,我們可以看到除了欄位間有 10px 的距離之外,其實表格周邊欄位與表格邊框間的距離也同樣有 10px 的距離,這就是 css border-spacing 的效果。

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

延伸研究 border-collapse 屬性,請參閱:CSS border-collapse 屬性

更多表格設計的技巧
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C