使用CSS设置表格

新客网 XKER.COM 2008-10-07 来源：收藏本文

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;
}

标签：CSS 表格

顶一下

上一篇：文字超出显示省略号==CSS制作
下一篇：CSS定高多行垂直居中

【收藏】【推荐】【投稿】【打印】【关闭】