HTML Table cellspacing CSS 替代語法 - CSS 學習筆記

HTML Table cellspacing CSS 替代語法是 border-spacing 屬性，我們都知道 cellspacing 可以幫我們創造出好看的欄位邊框間距離，不過隨著 CSS 技術的普及與發展，將來會月來越少人用 cellspacing 這項功能而改採 CSS 的替代語法，這當然是有優點的，在 CSS 中早就準備好 border-spacing 這個屬性來取代傳統的 cellspacing，除了可以設計出更美更細膩的欄位間距離之外，也獲得廣大的瀏覽器支持，現在已經是主流語法。

CSS border-spacing 屬性語法

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

CSS 的 border-spacing 屬性很簡單，僅有兩個參數要設定，第一個參數是＂欄位水平間的距離＂，第二個參數則是＂欄位垂直間的距離＂，有了這兩個參數，瀏覽器就知道水平與垂直方像的欄位間距離要多少，通常是採用數字加單位的表示，請看範例的呈現。

HTML Table cellspacing CSS 替代語法範例

原始碼：在新視窗開啟程式碼文字檔

範例的效果展示

將 border-spacing 設為 10px 的效果	將 border-spacing 設為 10px 的效果
將 border-spacing 設為 10px 的效果	將 border-spacing 設為 10px 的效果

將 border-spacing 設為 10px 的效果	將 border-spacing 設為 10px 的效果
將 border-spacing 設為 10px 的效果	將 border-spacing 設為 10px 的效果

為了清楚呈現 border-spacing 屬性的效果，我們總共準備了兩個類似的 HTML 表格，第一個表格利用 border-spacing 屬性將欄位間距離設定為 1px，第二個表格則大幅度的將欄位間距離加大至 10px，可以很清楚的看出彼此的差異，這樣的效果用傳統的 HTML cellspacing 屬性也能做到，不過我們還是希望利用 CSS 的 border-spacing 屬性來設計，因為這是未來的趨勢也是有較多優點的設計方式。

延伸閱讀