CSS border-spacing 屬性

CSS border-spacing 屬性的功能是用來設計網頁表格欄位間或欄位與邊框間的距離,有點類似傳統 HTML 表格cellspacing 屬性,只不過 CSS border-spacing 屬性可以設計出更細膩的視覺效果,因為 border-spacing 屬性能夠做出 cellspacing 屬性無法達到的水平方向與垂直方向分開設計,所以變化更多也更細膩,所以 border-spacing 屬性也經常被視為是 cellspacing 屬性的取代語法。

CSS border-spacing 屬性基礎語法
border-spacing: 欄位水平間的距離 欄位垂直間的距離;
CSS 的 border-spacing 屬性有兩個參數可以設定,第一個參數設定的是水平方向的欄位間距離,第二個參數設定的則是垂直間的欄位間距離,可以使用「數字 + 單位」的寫法,待會兒在範例中就會看到。另外,雖然大多數新的瀏覽器都支援 CSS border-spacing 屬性,不過老舊的 IE 瀏覽器就不支援,所以請考慮你的網站使用者有沒有人會使用 IE 瀏覽器,特別是會用老舊版本的 IE,如果是這樣的話,那還是使用傳統的 HTML cellspacing 屬性吧!

CSS border-spacing 屬性應用範例
原始碼: 在新視窗開啟程式碼文字檔
範例的顯示效果
未使用 border-spacing 的表格欄位未使用 border-spacing 的表格欄位
未使用 border-spacing 的表格欄位未使用 border-spacing 的表格欄位
使用 border-spacing 的表格欄位使用 border-spacing 的表格欄位
使用 border-spacing 的表格欄位使用 border-spacing 的表格欄位
我們在範例中準備了兩個不同的 HTML 表格,第一個表格僅用了 border="1" 的效果,這是讓表格欄位粗細用 1 表示,相當傳統的設定方式,第二個表格套用了今天的主角 border-spacing 屬性,而且將水平方向的欄位間距離(包含與表格邊框間的距離)調整為 10px,垂直方向的的欄位間距離調整為 20px,可以從範例的顯示效果中看到相當顯著的差異,這就是 CSS border-spacing 屬性的功能。

延伸閱讀
分享於 2016-01-10