網頁制作實例:用CSS樣式描述表格Table邊框

http://www.inspirr.com

　表格邊框的處理是CSS網頁布局中經常會遇到的內容，在webjx.com中也有過相關的介紹，除了將表格作為一個整體進行定義，您也可以將表格邊框的四個部分分別進行定義，包括頂部、底部、左邊和右邊。列表B中的代碼將剛才的例子中的表格分成四個部分單獨定義。

<html><head><title>HTMLTable</title></head>
<styletype="text/css">
TABLE{
background:blue;
border-collapse:separate;
border-spacing:10pt;
border-top:15pxsolidred;
border-left:15pxsolidred;
border-right:5pxdashedblack;
border-bottom:10pxdashedblue;}
TD,TH{
background:white;
border:outset5pt;
horizontal-align:right;}
CAPTION{
border:ridge5ptblue;
border-top:ridge10ptblue;}
</style><body>

<tablesummary="webjx.com-TablesandCSS">
<caption>FirstQuarterSales</caption>
<thead><tr>
<thabbr="salesperson"scope="col">Person</th>
<thabbr="sales"scope="col">Sales</th>
</tr></thead>
<tbody><tr>
<td>Mr.Jin</td>
<td>600.00</td>
</tr><tr>
<td>Mr.Jones</td>
<td>0000.00</td>
</tr><tr>
<td>Ms.Williams</td>
<td>0000.00</td>
</tr></tbody>
<tfoot><tr>
<tdcolspan="2">Let'ssale,sale,sale!</td>
</tr></tfoot></table></body></html>
列表B

　　您可能注意到了整個CAPTION元素的邊框定義為藍色5磅的脊線效果，而CAPTION邊框的頂部設定為10磅。如果單獨的邊框設定（左邊、右邊、頂部、底部）出現在后面將覆蓋原有的整體邊框設定。
　　除此以外，在上一個例子中，通過分配TABLE元素的邊框屬性，可以在一個表格中實現多重邊框（錨標記、表格主體、表頭、單獨的單元格等等）。

邊框間距

　　您可以通過邊框間距屬性來指定相鄰的單元格之間的距離，您可以指定一個或兩個值，如果指定了一個值，那么水平和垂直間距都將使用這一個值；如果指定了兩個值，那么第一個值規定了水平間距而第二個值指定了垂直間距。這些值不能是負值，我在這個例子中使用了10磅的間距值。

表格行為

　　邊框的collapse屬性設定了表格的邊框模型，該屬性的默認值是獨立的邊框模型，單獨的邊框模型使用border-spacing屬性作為不同邊框之間的間距，該間距使用表格元素作為填充背景。
　　對于邊框模型中，萬維網聯盟（WorldWideWebConsortium）定義了以下的規則來解決表格樣式的沖突：
　　使用‘隱藏’邊框屬性的邊框優先于其他的邊框屬性，任何使用‘隱藏’屬性的邊框比其它的邊框屬性處理優先級要高。
　　使用‘無樣式’邊框的優先級最低，如果在同一位置所有元素的邊框屬性都是‘無樣式’，表格邊框才會被忽略。（注意，‘無樣式’是邊框樣式的默認值。）
　　如果沒有樣式設置為‘隱藏’而且至少有一個樣式沒有設置為‘無樣式’，那么寬邊框的優先級高于細邊框。邊框樣式的優先級如下：雙實線、單實線、虛線、點線、脊線、外凸、槽線，級別最低的是內凹。
　　如果邊框樣式只有顏色不同，那么單元格的樣式優先級高于行的優先級，而且高于行組、列、列組和整個表格。

邊框

　　表格和其他的HTML元素一樣，擁有很多CSS樣式選項。表格和單元格的邊框是一個很好的例子，CSS應當可以滿足您對表格樣式的需要。但是使用CSS格式化的表格在不同的瀏覽器中會顯示出不同的效果，因此需要進行廣泛的測試。