使用CSS设置表格

　2008-10-07 19:28:41　来源：WEB开发网　　　

核心提示：HTML代码：<body> <table class="tableList" width="600" cellspacing="0"> <caption>江山代有才人出各领风骚数百年</caption>

HTML代码：
<body>
　 <table class="tableList" width="600" cellspacing="0">
　　　 <caption>江山代有才人出各领风骚数百年</caption>
　　　 <thead>
　　　　　 <tr>
　　　　　　　 <th>三代</th>
　　　　　　　 <th>汉朝</th>
　　　　　　　 <th>晋朝</th>
　　　　　　　 <th>唐朝</th>
　　　　　　　 <th>宋朝</th>
　　　　　　　 <th>明朝</th>
　　　　　 </tr>
　　　 </thead>
　　　 <tbody>
　　　　　 <tr>
　　　　　　　 <td>孔子</td>
　　　　　　　 <td>董仲舒</td>
　　　　　　　 <td>阮籍</td>
　　　　　　　 <td>李白</td>
　　　　　　　 <td>苏轼</td>
　　　　　　　 <td>王阳明</td>
　　　　　 </tr>
　　　　　 <tr class="odd">
　　　　　　　 <td>孟子</td>
　　　　　　　 <td>东方朔</td>
　　　　　　　 <td>嵇康</td>
　　　　　　　 <td>杜甫</td>
　　　　　　　 <td>辛弃疾</td>
　　　　　　　 <td>唐寅</td>
　　　　　 </tr>
　　　　　 <tr>
　　　　　　　 <td>老子</td>
　　　　　　　 <td>扬雄</td>
　　　　　　　 <td>陶渊明</td>
　　　　　　　 <td>李商隐</td>
　　　　　　　 <td>陆游</td>
　　　　　　　 <td>徐渭</td>
　　　　　 </tr>
　　　　　 <tr class="odd">
　　　　　　　 <td>庄子</td>
　　　　　　　 <td>左思</td>
　　　　　　　 <td>王羲之</td>
　　　　　　　 <td>李贺</td>
　　　　　　　 <td>范仲淹</td>
　　　　　　　 <td>杨慎</td>
　　　　　 </tr>
　　　　　 <tr>
　　　　　　　 <td>荀子</td>
　　　　　　　 <td>司马迁</td>
　　　　　　　 <td>庾信</td>
　　　　　　　 <td>王维</td>
　　　　　　　 <td>欧阳修</td>
　　　　　　　 <td>吕坤</td>
　　　　　 </tr>　　　　　
　　　　　 <tr class="odd">
　　　　　　　 <td>韩非子</td>
　　　　　　　 <td>班固</td>
　　　　　　　 <td>鲍照</td>
　　　　　　　 <td>白居易</td>
　　　　　　　 <td>苏洵</td>
　　　　　　　 <td>宋濂</td>
　　　　　 </tr>
　　　 </tbody>
　 </table>
</body>
CSS代码：
/**//*2008.09.28*/

Table.tableList{}{
　 border-top:1px solid #000000;
　 border-bottom:1px solid #000000;
　 border-left:0px solid #000000;
　 border-left:0px solid #000000;
}

Table.tableList caption{}{
　 font-size:16px;
　 font-weight:bold;
}

Table.tableList thead{}{
　 height:31px;
　 background:#ffffff url(../img/th_flower_bg.gif) repeat-x left center:
　 border-top:1px solid #e0dace;
　 border-bottom:1px solid #e0dace;
}

Table.tableList tbody{}{
　 height:25px;
}

Table.tableList th{}{
　 border-bottom:1px solid #e0dace;
　 text-align:center;
}

Table.tableList tr.odd{}{
　 background-color:#faf4e8;
}

Table.tableList td{}{　
　 border-bottom:1px solid #e0dace;
　
　 padding-left:4px;
　 padding-right:4px;
　 padding-top:4px;
　 padding-bottom:1px;　
　
　 text-align:left;
}