春风博客

春天里,百花香...

导航

<2008年10月>
2829301234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

公告

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

Locations of visitors to this page

常用链接

留言簿(11)

随笔分类(224)

随笔档案(126)

个人软件下载

我的其它博客

我的邻居们

最新随笔

搜索

积分与排名

最新评论

阅读排行榜

评论排行榜

使用CSS设置表格二

下面是示例图,blogjava的网友们都很熟悉吧。


CSS代码:
/*2008.09.28*/

Table.grayblogjava
{
    border-top
:0px solid #6b86b3;
    border-bottom
:3px solid #6b86b3;
    border-left
:0px solid #6b86b3;
    border-right
:0px solid #6b86b3;
}


Table.grayblogjava caption
{
    font-size
:16px;
    font-weight
:bold;
    text-align
:left;
    
    border-top
:1px solid #999999;
    border-bottom
:1px dashed #999999;
    border-left
:0px solid #999999;
    border-right
:0px solid #999999;
    
    padding-left
:5px;
    
    background
:#e5eef7;
}


Table.grayblogjava thead
{
    height
:31px;
    background
:#ffffff;
    border-top
:1px solid #e6e6e6;
    border-bottom
:1px solid #e6e6e6;
}


Table.grayblogjava tbody
{
    height
:25px;
}


Table.grayblogjava th
{
    border-bottom
:1px solid #6b86b3;
    text-align
:center;
}


Table.grayblogjava tr.odd
{
    background-color
:#f5f5f5;
}


Table.grayblogjava td
{    
    border-bottom
:1px solid #e6e6e6;
    
    padding-left
:5px;
    padding-right
:4px;
    padding-top
:4px;
    padding-bottom
:1px;    
    
    text-align
:left;
}


Table.grayblogjava td a
{    
    color
:#6b86b3;
     text-decoration
: none;
}


Table.grayblogjava td a:hover
{    
    color
:#cc0066;
     text-decoration
: underline;
}



HTML代码:
<%@ page contentType="text/html; charset=UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Css Table Sample 2</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" rev="stylesheet" href="web/css/style.css" type="text/css" />
<script src="web/js/formchecker.js" type="text/javascript"></script>
<script src="web/js/ajax.js" type="text/javascript"></script>
</head>

<body>
    
<table class="grayblogjava" width="600" cellspacing="0">
        
<caption>江山代有才人出 各领风骚数百年(模拟Blogjava设置界面表格)</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><href="#">苏轼</a></td>
                
<td><href="#">王阳明</a></td>
            
</tr>
            
<tr class="odd">
                
<td>孟子</td>
                
<td>东方朔</td>
                
<td>嵇康</td>
                
<td>杜甫</td>
                
<td><href="#">辛弃疾</a></td>
                
<td><href="#">唐寅</a></td>
            
</tr>
            
<tr>
                
<td>老子</td>
                
<td>扬雄</td>
                
<td>陶渊明</td>
                
<td>李商隐</td>
                
<td><href="#">陆游</a></td>
                
<td><href="#">徐渭</a></td>
            
</tr>
            
<tr class="odd">
                
<td>庄子</td>
                
<td>左思</td>
                
<td>王羲之</td>
                
<td>李贺</td>
                
<td><href="#">范仲淹</td>
                
<td><href="#">杨慎</td>
            
</tr>
            
<tr>
                
<td>荀子</td>
                
<td>司马迁</td>
                
<td>庾信</td>
                
<td>王维</td>
                
<td><href="#">欧阳修</a></td>
                
<td><href="#">吕坤</a></td>
            
</tr>            
            
<tr class="odd">
                
<td>韩非子</td>
                
<td>班固</td>
                
<td>鲍照</td>
                
<td>居易</td>
                
<td><href="#">苏洵</a></td>
                
<td><href="#">宋濂</a></td>
            
</tr>
        
</tbody>
    
</table>
</body>
</html>

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

posted on 2008-10-03 15:35 sitinspring 阅读(972) 评论(0)  编辑  收藏 所属分类: HTML,CSS&JS


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


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