Table式样css样例 _HTML/CSS

Table样式css样例

由于需要，在网上找了个table的样式稍微改了下。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html  xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
	<head>
		<title>报表标题</title>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK" />
		<link href="styles.css" rel="stylesheet" type="text/css" /> 
	</head>
	<style type="text/css"> 
     /* CSS Document */
     body { 
     font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
     color: #4f6b72; 
     }
     a { 
    overflow:visible;
    font-family:Tahoma,Helvetica,Arial,"宋体",sans-serif;
    color:#0047D8;
    }
    a:hover{color: #9997D8;}
	#mytable { 
    width: 700px; 
    padding: 0; 
    margin: 0; 
    }
    caption { 
    padding: 0 0 5px 0; 
    width: 700px;      
    font:  18px Bold "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    text-align: center; 
    }
    th { 
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
    color: #4f6b72; 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    border-top: 1px solid #C1DAD7; 
    letter-spacing: 2px; 
    text-transform: uppercase; 
    text-align: left; 
    padding: 6px 6px 6px 12px; 
    background: #CAE8EA url(images/bg_header.jpg) no-repeat; 
    }
    th.nobg { 
    border-top: 0; 
    border-left: 0; 
    border-right: 1px solid #C1DAD7; 
    background: none;
    }
    td { 
    border-right: 1px solid #C1DAD7; 
    border-bottom: 1px solid #C1DAD7; 
    background: #fff; 
    font-size:11px; 
    padding: 6px 6px 6px 12px; 
    color: #4f6b72; 
    }
    td.alt { 
    background: #F5FAFA; 
    color: #797268; 
    }
  </style> 
	<body>
	    <div style="text-align:left">
	            <h4>统计数据概要</h4>
                    <h5><A HREF="#everyReportCountSummary">交易笔数</A></h5>
        </div>
        
		<div id="everyReportCountSummary" style="text-align:left">
		      <table border=1 width="50%" height="200">
		        <caption>交易笔数</caption>   
			    <tr>
                    <th>交易状态</th><th>笔数</th>
                </tr>
                <tr>
                    <td class="alt">创建笔数</td><td class="alt">123</td>
                </tr>
                <tr>
                    <td>付款笔数</td><td>343</td>
                </tr>
                <tr>
                    <td class="alt">发货笔数</td><td class="alt">122</td>
                </tr>
                <tr>
                    <td>确认收货笔数</td><td>133</td>
                </tr>
                <tr>
                    <td class="alt">申请退款笔数</td><td class="alt">50</td>
                </tr>
                <tr>
                    <td>退款成功笔数</td><td>40</td>
                </tr>
             </table>
        </div>
        
	</body>
</html>

1 楼 kaki 2010-02-23

有什么特别的地方吗？？

2 楼 msi110 2010-02-23

看了一下，觉得很普通，没有什么特别的地方啊？

3 楼 cnyangqi 2010-02-23

看了，搭配色彩不是我喜欢的^^

4 楼解未知数 2010-02-23

我也没看出有什么特别的地方.......

5 楼 mikkjl 2010-02-23

没发现什么特别地方

6 楼 newid 2010-02-23

被标题了。

7 楼 yljch1116 2010-02-24

没什么特殊的。

8 楼 pearflower 2010-02-24

太粗糙啦。

9 楼 jemysky 2010-02-24

w 我也不是很喜欢
做得一般