当前位置: 代码迷 >> HTML/CSS >> Table式样css样例
  详细解决方案

Table式样css样例

热度:125   发布时间:2012-11-25 11:44:31.0
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 我也不是很喜欢
做得一般
  相关解决方案