用CSS样式描述表格Table边框

表格边框的处理是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>