用 CSS padding 設計 HTML 表格邊框與欄位間的距離

用 CSS padding 設計 HTML 表格邊框與欄位間的距離是一種表格設計的技巧，可以加大表格邊框與表格內欄位邊框間的距離，當然也可以縮小彼此間的距離，有點類似傳統 HTML 表格的 cellspacing 屬性，但使用 CSS padding 的效果更加細膩，且不影響表格欄位彼此間的距離，單純控制表格本身邊框與內部欄位間的距離，以下透過範例讓各位看得清楚一點，幾乎所有主流的瀏覽器都支援這 padding 的效果。

HTML 表格邊框與欄位間的距離範例一、四個邊框與欄位距離相同
<style type="text/css">
<!--
table{
    padding:10px;
    background-color:#eee;
    border:1px solid black;
}
td{
    border:1px solid black;
    background-color:white;
}
-->
</style>
<table>
    <tr><td>範例表格欄位</td><td>範例表格欄位</td></tr>
    <tr><td>範例表格欄位</td><td>範例表格欄位</td></tr>
</table>
呈現結果
範例表格欄位範例表格欄位
範例表格欄位範例表格欄位
我們都知道 padding 是 CSS 標準的＂內距＂設計規則，我們將 padding 應用在 HTML 表格中，就是希望透過內距間的參數設定，來創造出不同風格的表格效果，從範例一可以很明顯的看到，表格「padding:10px;」的效果，讓整個表格的邊框與表格內部的欄位間，產生了 10px 的距離，另外，我們還用了背景顏色，讓灰色的部分呈現出來，關於 padding 與背景顏色設計技巧，可以閱讀以下篇幅的內容。
對於 padding 的效果有了基本的認識後，我們可以進一步將表格上下左右四個邊都設計不同的距離，這也是 padding 屬性的基本功能，範例二就讓表格上下邊框與欄位距離固定，左右邊框與欄位的距離固定，但上下與左右卻又不同。

HTML 表格邊框與欄位間的距離範例二、表格上下邊框與左右邊框的差異
<style type="text/css">
<!--
table{
    padding:10px 2px;
    background-color:#eee;
    border:1px solid black;
}
td{
    border:1px solid black;
    background-color:white;
}
-->
</style>
<table>
    <tr><td>範例表格欄位</td><td>範例表格欄位</td></tr>
    <tr><td>範例表格欄位</td><td>範例表格欄位</td></tr>
</table>
呈現結果
範例表格欄位範例表格欄位
範例表格欄位範例表格欄位
範例二的上下邊框與左右邊框距離效果主要是透過「padding:10px 2px;」所設計出來的，意思是表格上下的內距為 10px，左右的內距為 2px，如此一來就能創造出範例二的效果，如果要設計出上下左右都不一樣的距離，padding 屬性同樣做得到。

PS. 請將範例一與範例二的程式碼複製到一分空白文件，並存檔為 test.html 後，用瀏覽器開啟檔案，就可以看到效果，你可以修改 padding 的參數值或背景顏色來改變表格的風格。

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