表格邊框的處理是CSS網頁布局中經常會遇到的內容，在webjx.com中也有過相關的介紹，除了將表格作為一個整體進行定義，您也可以將表格邊框的四個部分分別進行定義，包括頂部、底部、左邊和右邊。列表B中的代碼將剛才的例子中的表格分成四個部分單獨定義。
- <html><head><title>HTML Table</title></head>
- <style type="text/css">
- TABLE {
- background: blue;
- border-collapse: separate;
- border-spacing: 10pt;
- border-top: 15px solid red;
- border-left: 15px solid red;
- border-right: 5px dashed black;
- border-bottom: 10px dashed blue; }
- TD, TH {
- background: white;
- border: outset 5pt;
- horizontal-align: right; }
- CAPTION {
- border: ridge 5pt blue;
- border-top: ridge 10pt blue; }
- </style><body>
- <table summary="webjx.com - Tables and CSS">
- <caption>First Quarter Sales</caption>
- <thead><tr>
- <thabbrthabbr="salesperson" scope="col">Person</th>
- <thabbrthabbr="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>
- <td colspan="2">Let's sale, sale, sale!</td>
- </tr></tfoot></table></body></html>
- .........................................
列表B
您可能注意到了整個CAPTION元素的邊框定義為藍色5磅的脊線效果，而CAPTION邊框的頂部設定為10磅。如果單獨的邊框設定（左邊、右邊、頂部、底部）出現在後面將覆蓋原有的整體邊框設定。
除此以外，在上一個例子中，通過分配TABLE元素的邊框屬性，可以在一個表格中實現多重邊框（錨標記、表格主體、表頭、單獨的單元格等等）。