用 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>
呈現結果
範例表格欄位範例表格欄位
範例表格欄位範例表格欄位
我們都知道 paddingCSS 標準的"內距"設計規則,我們將 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 Englsih version
PHP Smarty MySQL JQuery Apache W3C