CSS border-spacing 屬性語法
border-spacing: 表格欄位水平間的距離 表格欄位垂直間的距離;
兩個參數若只寫一個,表示表格欄位的水平與垂直間距離都一樣,分開可分別設計水平與垂直間的距離,關於 border-spacing 屬性的用法,請參閱本站另外的這篇介紹內容,有更詳細的語法使用規則與範例。以下的範例將呈現 HTML cellspacing 與 CSS border-spacing 的用法與差異。
HTML Table cellspacing 的 CSS 替代語法範例一、原始 cellspacing 效果
<table cellspacing="10" border="1">
<tr><td>使用 cellspacing 後的欄位</td><td>使用 cellspacing 後的欄位</td></tr>
<tr><td>使用 cellspacing 後的欄位</td><td>使用 cellspacing 後的欄位</td></tr>
</table>
呈現的效果<tr><td>使用 cellspacing 後的欄位</td><td>使用 cellspacing 後的欄位</td></tr>
<tr><td>使用 cellspacing 後的欄位</td><td>使用 cellspacing 後的欄位</td></tr>
</table>
使用 cellspacing 後的欄位 | 使用 cellspacing 後的欄位 |
使用 cellspacing 後的欄位 | 使用 cellspacing 後的欄位 |
接著範例二將會用 CSS 的 border-spacing 完全的取代範例一個 HTML Table cellspacing 效果。
HTML Table cellspacing 的 CSS 替代語法範例二、改用 css border-spacing 效果
<table style="border-spacing:10px;" border="1">
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
</table>
呈現的效果<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
</table>
使用 border-spacing 後的欄位 | 使用 border-spacing 後的欄位 |
使用 border-spacing 後的欄位 | 使用 border-spacing 後的欄位 |
HTML Table cellspacing 的 CSS 替代語法範例三、欄位的水平與垂直間距離不同
<table style="border-spacing:20px 5px;border-collapse:separate;" border="1">
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
</table>
呈現的效果<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
<tr><td>使用 border-spacing 後的欄位</td><td>使用 border-spacing 後的欄位</td></tr>
</table>
使用 border-spacing 後的欄位 | 使用 border-spacing 後的欄位 |
使用 border-spacing 後的欄位 | 使用 border-spacing 後的欄位 |
➤學會表格欄位間距離,那表格內部距離呢?看這篇:HTML Table cellpadding 的 CSS 替代語法。
更多表格設計技巧