Table式样css样例-HTML教程-爱易网页

Table式样css样例

日期：2014-05-17　浏览次数：20863 次

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

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

Table式样css样例

相关资料更多>

推荐阅读更多>