网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > CSS
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
本月文章推荐
.引入CSS样式的五种方式.
.学习CSS的背景图像属性background.
.CSS层叠样式的主次顺序.
.SPAN和DIV的区别.
.CSS+DIV网页特效欣赏:非常酷的角.
.技巧总结:div中class与id的区别.
.纯CSS制作的新闻网站中的文章列表.
.利用CSS制作动感导航栏.
.JavaScript CSS Style属性对照表.
.CSS+DIV设计实例:超酷的竖排导航.
.在CSS中关于字体处理效果的思考.
.CSS+JS实现的选项卡效果(html组件.
.CSS文字换行详细解说.
.完全用CSS实现的中英文双语导航菜.
.合理使用HTML标签进行CSS布局.
.input的Css样式.
.DIV+CSS常见错误汇总.
.CSS滤镜说明和用法.
.需要掌握的八个CSS布局技巧.
.select用CSS控制边框及其他属性.

使用CSS设置表格

发表日期:2008-10-7


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制作 人气:887
下一篇:CSS定高多行垂直居中 人气:751
浏览全部CSS的内容 Dreamweaver插件下载 网页广告代码 祝你圣诞节快乐 2009年新年快乐