好看的table 样式三

http://blog.youkuaiyun.com/chenweitang123/article/details/6152694

收集好看的table 样式,报表经常用的到.

 

效果图:

 

源代码:

[javascript]  view plain copy
  1. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
  5. <title>css_table 3</title>  
  6. <mce:style type="text/css"><!--  
  7. /* css document */ body {  
  8.     font: normal 11px auto "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  9.     color: #4f6b72;  
  10.     background: #e6eae9;  
  11. }  
  12. a {  
  13.     color: #c75f3e;  
  14. }  
  15. #mytable {  
  16.     width: 700px;  
  17.     padding: 0;  
  18.     margin: 0;  
  19. }  
  20. caption {  
  21.     padding: 0 0 5px 0;  
  22.     width: 700px;  
  23.     font: italic 11px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  24.     text-align: right;  
  25. }  
  26. th {  
  27.     font: bold 11px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  28.     color: #4f6b72;  
  29.     border-right: 1px solid #c1dad7;  
  30.     border-bottom: 1px solid #c1dad7;  
  31.     border-top: 1px solid #c1dad7;  
  32.     letter-spacing: 2px;  
  33.     text-transform: uppercase;  
  34.     text-align: left;  
  35.     padding: 6px 6px 6px 12px;  
  36.     background: #cae8ea url(images/bg_header.jpg) no-repeat;  
  37. }  
  38. td {  
  39.     border-right: 1px solid #c1dad7;  
  40.     border-bottom: 1px solid #c1dad7;  
  41.     background: #fff;  
  42.     font-size:11px;  
  43.     padding: 6px 6px 6px 12px;  
  44.     color: #4f6b72;  
  45. }  
  46. td.alt {  
  47.     background: #f5fafa;  
  48.     color: #797268;  
  49. }  
  50. th.spec {  
  51.     border-left: 1px solid #c1dad7;  
  52.     border-top: 0;  
  53.     background: #fff url(images/bullet1.gif) no-repeat;  
  54.     font: bold 10px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  55. }  
  56. th.specalt {  
  57.     border-left: 1px solid #c1dad7;  
  58.     border-top: 0;  
  59.     background: #f5fafa url(images/bullet2.gif) no-repeat;  
  60.     font: bold 10px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  61.     color: #797268;  
  62. /*-----for ie 5.x bug*/  
  63. html>body td {  
  64.     font-size:11px;  
  65. }  
  66. --></mce:style><style type="text/css" mce_bogus="1">/* css document */ body {  
  67.     font: normal 11px auto "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  68.     color: #4f6b72;  
  69.     background: #e6eae9;  
  70. }  
  71. a {  
  72.     color: #c75f3e;  
  73. }  
  74. #mytable {  
  75.     width: 700px;  
  76.     padding: 0;  
  77.     margin: 0;  
  78. }  
  79. caption {  
  80.     padding: 0 0 5px 0;  
  81.     width: 700px;  
  82.     font: italic 11px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  83.     text-align: right;  
  84. }  
  85. th {  
  86.     font: bold 11px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  87.     color: #4f6b72;  
  88.     border-right: 1px solid #c1dad7;  
  89.     border-bottom: 1px solid #c1dad7;  
  90.     border-top: 1px solid #c1dad7;  
  91.     letter-spacing: 2px;  
  92.     text-transform: uppercase;  
  93.     text-align: left;  
  94.     padding: 6px 6px 6px 12px;  
  95.     background: #cae8ea url(images/bg_header.jpg) no-repeat;  
  96. }  
  97. td {  
  98.     border-right: 1px solid #c1dad7;  
  99.     border-bottom: 1px solid #c1dad7;  
  100.     background: #fff;  
  101.     font-size:11px;  
  102.     padding: 6px 6px 6px 12px;  
  103.     color: #4f6b72;  
  104. }  
  105. td.alt {  
  106.     background: #f5fafa;  
  107.     color: #797268;  
  108. }  
  109. th.spec {  
  110.     border-left: 1px solid #c1dad7;  
  111.     border-top: 0;  
  112.     background: #fff url(images/bullet1.gif) no-repeat;  
  113.     font: bold 10px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  114. }  
  115. th.specalt {  
  116.     border-left: 1px solid #c1dad7;  
  117.     border-top: 0;  
  118.     background: #f5fafa url(images/bullet2.gif) no-repeat;  
  119.     font: bold 10px "trebuchet ms", verdana, arial, helvetica, sans-serif;  
  120.     color: #797268;  
  121. /*-----for ie 5.x bug*/  
  122. html>body td {  
  123.     font-size:11px;  
  124. }</style>  
  125. </head>  
  126. <body>  
  127. <table id="mytable" cellspacing="0" summary="the technical specifications of the apple powermac g5 series">  
  128.   <caption>  
  129.   </caption>  
  130.   <tr>  
  131.     <th scope="col" abbr="configurations">configurations</th>  
  132.     <th scope="col" abbr="dual 1.8">dual 1.8ghz</th>  
  133.     <th scope="col" abbr="dual 2">dual 2ghz</th>  
  134.     <th scope="col" abbr="dual 2.5">dual 2.5ghz</th>  
  135.   </tr>  
  136.   <tr>  
  137.     <th scope="row" abbr="model" class="spec">lipeng</th>  
  138.     <td>m9454ll/a</td>  
  139.     <td>m9455ll/a</td>  
  140.     <td>m9457ll/a</td>  
  141.   </tr>  
  142.   <tr>  
  143.     <th scope="row" abbr="g5 processor" class="specalt">mapabc</th>  
  144.     <td class="alt">dual 1.8ghz powerpc g5</td>  
  145.     <td class="alt">dual 2ghz powerpc g5</td>  
  146.     <td class="alt">dual 2.5ghz powerpc g5</td>  
  147.   </tr>  
  148.   <tr>  
  149.     <th scope="row" abbr="frontside bus" class="spec">mass</th>  
  150.     <td>900mhz per processor</td>  
  151.     <td>1ghz per processor</td>  
  152.     <td>1.25ghz per processor</td>  
  153.   </tr>  
  154.   <tr>  
  155.     <th scope="row" abbr="l2 cache" class="specalt">2</th>  
  156.     <td class="alt">512k per processor</td>  
  157.     <td class="alt">512k per processor</td>  
  158.     <td class="alt">512k per processor</td>  
  159.   </tr>  
  160. </table>  
  161. </body>  
  162. </html>  

 


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值