zoukankan      html  css  js  c++  java
  • 漂亮的表格样式

    CSS控制,漂亮的表格样式

    2008-11-04 18:58:00 | 【  
     
     
    CONFIGURATIONSDUAL 1.8GHZDUAL 2GHZDUAL 2.5GHZ
    LIPENG M9454LL/A M9455LL/A M9457LL/A
    MAPABC Dual 1.8GHz PowerPC G5 Dual 2GHz PowerPC G5 Dual 2.5GHz PowerPC G5
    频率 900MHz per processor 1GHz per processor 1.25GHz per processor
    2级缓存 512K per processor 512K per processor 512K per processor

    用CSS美化表格的样式,看起来非常的柔和、舒服

    查看全部代码 View Code

    第一步: 
    在网页<head>区添加样式定义 

    01 <style type="text/css">
    02 /* CSS Document */
    03  
    04 body {
    05     font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    06     color: #4f6b72;
    07     background: #E6EAE9;
    08 }
    09  
    10 a {
    11     color: #c75f3e;
    12 }
    13  
    14 #mytable {
    15      700px;
    16     padding: 0;
    17     margin: 0;
    18 }
    19  
    20 caption {
    21     padding: 0 0 5px 0;
    22      700px;     
    23     font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    24     text-align: right;
    25 }
    26  
    27 th {
    28     font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    29     color: #4f6b72;
    30     border-right: 1px solid #C1DAD7;
    31     border-bottom: 1px solid #C1DAD7;
    32     border-top: 1px solid #C1DAD7;
    33     letter-spacing: 2px;
    34     text-transform: uppercase;
    35     text-align: left;
    36     padding: 6px 6px 6px 12px;
    37     background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    38 }
    39  
    40 th.nobg {
    41     border-top: 0;
    42     border-left: 0;
    43     border-right: 1px solid #C1DAD7;
    44     background: none;
    45 }
    46  
    47 td {
    48     border-right: 1px solid #C1DAD7;
    49     border-bottom: 1px solid #C1DAD7;
    50     background: #fff;
    51     font-size:11px;
    52     padding: 6px 6px 6px 12px;
    53     color: #4f6b72;
    54 }
    55  
    56  
    57 td.alt {
    58     background: #F5FAFA;
    59     color: #797268;
    60 }
    61  
    62 th.spec {
    63     border-left: 1px solid #C1DAD7;
    64     border-top: 0;
    65     background: #fff url(images/bullet1.gif) no-repeat;
    66     font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    67 }
    68  
    69 th.specalt {
    70     border-left: 1px solid #C1DAD7;
    71     border-top: 0;
    72     background: #f5fafa url(images/bullet2.gif) no-repeat;
    73     font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    74     color: #797268;
    75 }
    76 /*---------for IE 5.x bug*/
    77 html>body td{ font-size:11px;}
    78 </style>


    第二步: 
    在网页<body>区需要显示表格的地方加上如下代码 
    01 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
    02 <caption> </caption>
    03   <tr>
    04     <th scope="col" abbr="Configurations"class="nobg">Configurations</th>
    05  
    06     <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    07     <th scope="col" abbr="Dual 2">Dual 2GHz</th>
    08     <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
    09   </tr>
    10   <tr>
    11     <th scope="row" abbr="Model" class="spec">lipeng</th>
    12     <td>M9454LL/A</td>
    13  
    14     <td>M9455LL/A</td>
    15     <td>M9457LL/A</td>
    16   </tr>
    17   <tr>
    18     <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
    19     <td class="alt">Dual 1.8GHz PowerPC G5</td>
    20     <td class="alt">Dual 2GHz PowerPC G5</td>
    21  
    22     <td class="alt">Dual 2.5GHz PowerPC G5</td>
    23   </tr>
    24   <tr>
    25     <th scope="row" abbr="Frontside bus" class="spec">频率</th>
    26     <td>900MHz per processor</td>
    27     <td>1GHz per processor</td>
    28     <td>1.25GHz per processor</td>
    29  
    30   </tr>
    31   <tr>
    32     <th scope="row" abbr="L2 Cache" class="specalt">2级缓存</th>
    33     <td class="alt">512K per processor</td>
    34     <td class="alt">512K per processor</td>
    35     <td class="alt">512K per processor</td>
    36   </tr>
    37  
    38 </table>

  • 相关阅读:
    IE8、IE7、IE6、Firefox2.0.0.12的一些CSS HACK测试
    scrollLeft,scrollWidth,clientWidth,offsetWidth到底指的哪到哪的距离
    使用XML技术实现OWC对数据库的展示
    Server Push详解
    Ajax ReadyState的五种状态详解
    JavaScript 动态创建表格:新增、删除行和单元格
    Windows 7令人满意,Code 7让人失望
    当Outlook 2010 Beta遇上Windows Mobile Device Center 6.1
    实际使用Windows 7中的Readyboost功能
    打开梦想的窗——成都Windows 7社区发布活动和Windows 7 Party总结
  • 原文地址:https://www.cnblogs.com/taomylife/p/3287616.html
Copyright © 2011-2022 走看看