CSS border-collapse 屬性

CSS border-collapse 屬性的功能是用來將表格欄位邊框合併,讓表格變得更美化,網頁設計師常透過 border-collapse 屬性的 separate 或 collapse 屬性值,將表格欄位的邊框距離加大或是合併在一起,border-collapse 常與 border-spacing 屬性搭配在一起設計,取代傳統 HTML 表格cellspacing 功能,並獲得更擴展的設計空間,幾乎所有主流的瀏覽器都支援 CSS border-collapse 屬性的效果。

CSS border-collapse 屬性語法
border-collapse: 參數值;
CSS border-collapse 屬性的參數值有三個,分別為 separate、collapse 以及 inherit,寫法如下。
  • border-collapse:separate; //預設值,邊框彼此間分開
  • border-collapse:collapse; //邊框合併為單一邊框
  • border-collapse:inherit; //繼承自父層的 border-collapse 屬性值。
第三種屬性值 inherit 較不受到 IE 瀏覽器的支持,建議不要使用。

CSS border-collapse 屬性範例一、使用屬性值 separate
<style type="text/css">
<!--
table{
    border-collapse:separate;
    collapse;border:1px solid black;
}
td{
    collapse;border:1px solid black;
}
-->
</style>
<table>
<tr><td>使用 border-collapse 後的表格</td><td>使用 border-collapse 後的表格</td></tr>
<tr><td>使用 border-collapse 後的表格</td><td>使用 border-collapse 後的表格</td></tr>
</table>
範例呈現效果
使用 border-collapse 後的表格使用 border-collapse 後的表格
使用 border-collapse 後的表格使用 border-collapse 後的表格
範例一呈現的是「border-collapse:separate;」的效果,我們特地將表格欄位的邊框設為黑色,各位可以看到表格欄位邊框彼此之間是分開的,連同與表格的邊框也是分開的,這就是 separate 屬性值的主要功能。如果要讓表格的線條一致,看起來就像是用線條畫出來的表格欄位該怎麼做呢?很簡單,只要將表格的欄位邊框合併在一起即可,請看範例二。

CSS border-collapse 屬性範例二、使用屬性值 collapse
<style type="text/css">
<!--
table{
    border-collapse:collapse;
    border:1px solid black;
}
td{
    border:1px solid black;
}
-->
</style>
<table>
<tr><td>使用 border-collapse 後的表格</td><td>使用 border-collapse 後的表格</td></tr>
<tr><td>使用 border-collapse 後的表格</td><td>使用 border-collapse 後的表格</td></tr>
</table>
範例呈現效果
使用 border-collapse 後的表格使用 border-collapse 後的表格
使用 border-collapse 後的表格使用 border-collapse 後的表格
範例二就是利用了「border-collapse:collapse;」的效果,讓所有表格欄位的邊框都合併起來,然後把邊框同樣設為黑色,看起來就像是用黑線畫出來的表格一樣,以上兩個範例就是常見的 CSS border-collapse 屬性效果。若您對於 HTML 表格的設計規則或是 CSS 的元素邊框設計有興趣,這裡有兩篇深入研究可以閱讀看看。
本篇介紹的 CSS border-collapse 屬性與 HTML 傳統的表格 cellspacing 有點類似。

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