css表格隔行变色实例介绍,实例效果如下:
CSS部分代码如下:
<style type="text/css">
table{
border-collapse:collapse;
border-bottom:1px solid #000000;
border-right:1px solid #000000;}
.odd{
background-color:#99CCCC}
.STYLE1 {
color: #FF0000;
font-weight: bold;
font-size: 18px;
}
</style>
body部分代码如下:
<table width="600" cellspacing="0" border="1" bordercolor="#000000">
<caption>
<span class="STYLE1">江山代有才人出 各领风骚数百年</span>
</caption>
<thead>
<tr>
<th>三代</th>
<th>汉朝</th>
<th>晋朝</th>
<th>唐朝</th>
<th>宋朝</th>
<th>明朝</th>
</tr>
</thead>
<tbody>
<tr>
<td><div align="center">孔子</div></td>
<td><div align="center">董仲舒</div></td>
<td><div align="center">阮籍</div></td>
<td><div align="center">李白</div></td>
<td><div align="center">苏轼</div></td>
<td><div align="center">王阳明</div></td>
</tr>
<tr class="odd">
<td><div align="center">孟子</div></td>
<td><div align="center">东方朔</div></td>
<td><div align="center">嵇康</div></td>
<td><div align="center">杜甫</div></td>
<td><div align="center">辛弃疾</div></td>
<td><div align="center">唐寅</div></td>
</tr>
<tr>
<td><div align="center">老子</div></td>
<td><div align="center">扬雄</div></td>
<td><div align="center">陶渊明</div></td>
<td><div align="center">李商隐</div></td>
<td><div align="center">陆游</div></td>
<td><div align="center">徐渭</div></td>
</tr>
<tr class="odd">
<td><div align="center">庄子</div></td>
<td><div align="center">左思</div></td>
<td><div align="center">王羲之</div></td>
<td><div align="center">李贺</div></td>
<td><div align="center">范仲淹</div></td>
<td><div align="center">杨慎</div></td>
</tr>
<tr>
<td><div align="center">荀子</div></td>
<td><div align="center">司马迁</div></td>
<td><div align="center">庾信</div></td>
<td><div align="center">王维</div></td>
<td><div align="center">欧阳修</div></td>
<td><div align="center">吕坤</div></td>
</tr>
<tr class="odd">
<td><div align="center">韩非子</div></td>
<td><div align="center">班固</div></td>
<td><div align="center">鲍照</div></td>
<td><div align="center">白居易</div></td>
<td><div align="center">苏洵</div></td>
<td><div align="center">宋濂</div></td>
</tr>
</tbody>
</table>