春风博客

春天里,百花香...

导航

<2008年9月>
31123456
78910111213
14151617181920
21222324252627
2829301234
567891011

统计

公告

MAIL: junglesong@gmail.com
MSN: junglesong_5@hotmail.com

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

使用CSS设置表格

效果图:


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



所有代码下载:
http://www.blogjava.net/Files/sitinspring/CssTable20080928145513.rar

posted on 2008-09-28 15:04 sitinspring 阅读(510) 评论(3)  编辑  收藏 所属分类: HTML,CSS&JS

评论

# re: 使用CSS设置表格 2008-09-28 18:57 日月雨林@gmail.com

不错不错!!  回复  更多评论   

# re: 使用CSS设置表格 2008-09-29 05:27 sclsch

你好,我按照你的做了,代码如下: table 的css就是不起作用,你看看是哪里有问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> New Document </title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

<style type="text/css">

body{
margin:10px;
height:100%;
text-align:center;
min-width:760px;
background:#FFFFFF;
}
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;
}
</style>

</head>

<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>
</html>

  回复  更多评论   

# re: 使用CSS设置表格 2008-09-29 09:55 sitinspring

你多加了大括号,下面代码可以参考。

<title> New Document </title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">

</head>

<style type="text/css">
body{
margin:10px;
height:100%;
text-align:center;
min-width:760px;
background:#ffffff;
}
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;
}
</style>

<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>
</html>  回复  更多评论   


只有注册用户登录后才能发表评论。


网站导航:
 
sitinspring(http://www.blogjava.net)原创,转载请注明出处.