用CSS样式描述表格Table边框
时间：2014-04-22 06:59:10来源：网络整理
表格边框的处理是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>
<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>
本类热门
