室内设计培训
平面设计培训
部落窝教育
网站首页 >> 设计在线 >> 文章内容

css表格隔行变色实例

[日期:2010-04-03]   来源:IT部落窝  作者:IT部落窝   阅读:2728[字体: ]

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>

IT部落窝PS,CDR,213班 分享到: QQ空间 新浪微博 腾讯微博 人人网
photoshop教程
Photoshop教程
平面设计教程
Photoshop教程