当柳上原的风吹向天际的时候...

真正的快乐来源于创造

  BlogJava :: 首页 :: 联系 :: 聚合  :: 管理
  368 Posts :: 1 Stories :: 201 Comments :: 0 Trackbacks
以前我们已经做过两个了,今天有空再做一个,对于练手积累都是有好处的。

下面是效果图:


CSS定义部分:
  <style type="text/css">
        <!--
        Table.stock
{
            border-top
:1px solid #91b0cc;
            border-bottom
:1px solid #91b0cc;
            border-left
:1px solid #91b0cc;
            border-right
:1px solid #91b0cc;
        
}

        Table.stock caption
{
            font-size
:15px;
            font-weight
:bold;
            text-align
:left;
            height
:24px;
            line-height
:24px;
            
            border-top
:1px solid #91b0cc;
            border-bottom
:0px dashed #91b0cc;
            border-left
:1px solid #91b0cc;
            border-right
:1px solid #91b0cc;
            
            padding-left
:5px;
            color
:#484848;
            background-image
:url(img/titBg.gif);
        
}

        Table.stock th
{
            font-size
:13px;
            font-weight
:normal;
            background-color
:#f2f9ff;
            border-bottom
:1px solid #91b0cc;
            color
:#62676b;
            height
:20px;
            line-height
:20px;
            text-align
:center;
        
}    

        Table.stock td
{    
            border-bottom
:1px solid #e6e6e6;
            color
:#62676b;
            height
:20px;
            line-height
:20px;
            
            text-align
:center;
        
}

        Table.stock td a
{    
            color
:#002b8d;
            text-decoration
: underline;
        
}

        Table.stock td a:hover
{    
            color
:#cc0000;
            text-decoration
: underline;
        
}

        .odd
{
            background-color
:#ffffff;
        
}
        .even
{
            background-color
:#f5f5f5;
        
}

        -->
    </style>

所有代码:
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
 
<head>
  
<title>jQuery First</title>
  
<style type="text/css">
    <!--
    Table.stock
{
      border-top
:1px solid #91b0cc;
      border-bottom
:1px solid #91b0cc;
      border-left
:1px solid #91b0cc;
      border-right
:1px solid #91b0cc;
    
}

    Table.stock caption
{
      font-size
:15px;
      font-weight
:bold;
      text-align
:left;
      height
:24px;
      line-height
:24px;
      
      border-top
:1px solid #91b0cc;
      border-bottom
:0px dashed #91b0cc;
      border-left
:1px solid #91b0cc;
      border-right
:1px solid #91b0cc;
      
      padding-left
:5px;
      color
:#484848;
      background-image
:url(img/titBg.gif);
    
}

    Table.stock th
{
      font-size
:13px;
      font-weight
:normal;
      background-color
:#f2f9ff;
      border-bottom
:1px solid #91b0cc;
      color
:#62676b;
      height
:20px;
      line-height
:20px;
      text-align
:center;
    
} 

    Table.stock td
{    
      border-bottom
:1px solid #e6e6e6;
      color
:#62676b;
      height
:20px;
      line-height
:20px;
      
      text-align
:center;
    
}

    Table.stock td a
{    
      color
:#002b8d;
      text-decoration
: underline;
    
}

    Table.stock td a:hover
{    
      color
:#cc0000;
      text-decoration
: underline;
    
}

    .odd
{
      background-color
:#ffffff;
    
}
    .even
{
      background-color
:#f5f5f5;
    
}

    -->
  
</style>
 
</head>

 
<body>
   
<table class="stock" width="600" cellspacing="0">
        
<caption>潜力股票一览(2009年8月22日)</caption>
        
<thead>
            
<tr>
                
<th>代号</th>
                
<th>名称</th>
                
<th>价格</th>
                
<th>涨跌幅</th>
                
<th>所属板块</th>
                
<th>子板块</th>
            
</tr>
        
</thead>
        
<tbody>
            
<tr class="odd">
                
<td>600362</td>
                
<td>江西铜业</td>
                
<td>36.89</td>
                
<td>0.52%</td>
                
<td><href="#">有色金属</a></td>
                
<td><href="#">铜业板块</a></td>
            
</tr>
            
<tr class="even">
                
<td>601088</td>
                
<td>中国神华</td>
                
<td>33.27</td>
                
<td>2.37%</td>
                
<td><href="#">煤炭石油</a></td>
                
<td><href="#">煤炭板块</a></td>
            
</tr>
            
<tr class="odd">
                
<td>000878</td>
                
<td>云南铜业</td>
                
<td>30.04</td>
                
<td>0.13%</td>
                
<td><href="#">有色金属</a></td>
                
<td><href="#">铜业板块</a></td>
            
</tr>
            
<tr class="even">
                
<td>600348</td>
                
<td>国阳新能</td>
                
<td>41.05</td>
                
<td>6.23%</td>
                
<td><href="#">煤炭石油</td>
                
<td><href="#">煤炭板块</td>
            
</tr>
            
<tr class="odd">
                
<td>000762</td>
                
<td>西藏矿业</td>
                
<td>18.99</td>
                
<td>1.98%</td>
                
<td><href="#">有色金属</a></td>
                
<td><href="#">稀缺资源</a></td>
            
</tr>            
            
<tr class="even">
                
<td>600269</td>
                
<td>赣粤高速</td>
                
<td>13.79</td>
                
<td>5.83%</td>
                
<td><href="#">运输物流</a></td>
                
<td><href="#">高速公路</a></td>
            
</tr>
        
</tbody>
    
</table>
 
</body>
</html>

<SCRIPT LANGUAGE="JavaScript">
<!--

  
//-->
</SCRIPT>

代码下载:
http://www.blogjava.net/Files/heyang/JsTable20090822203614.rar

posted on 2009-08-22 20:40 何杨 阅读(888) 评论(4)  编辑  收藏

Feedback

# re: 又一个表格CSS例子 2009-08-23 08:19 keer
如果你用jQuery, 处理类似的表格样式的话,代码不超过10行,呵呵  回复  更多评论
  

# re: 又一个表格CSS例子 2009-08-23 08:20 keer
我把地址给你 http://www.style5.cn/archives/91  回复  更多评论
  

# re: 又一个表格CSS例子 2009-08-23 10:47 heyang
@keer

嗯,jQuery是能帮我做不少事,但有些细节我觉得还是自己动手好。如表格的CSS定义。至于间隔色,自己完成也很容易。只是jQuery的hover功能比较牛,有空再看看源码。  回复  更多评论
  

# re: 又一个表格CSS例子 2009-08-23 10:48 heyang
@keer

http://www.blogjava.net/heyang/archive/2009/08/22/292221.html

这个是我自己做的表格处理类。欢迎批评指正。  回复  更多评论
  


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


网站导航: