zoukankan      html  css  js  c++  java
  • 漂亮的表格代码

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 Tables</title>
    6 <link href="styles.css" mce_href="styles.css" rel="stylesheet" type="text/css"/>
    7 </head>
    8 <mce:style type="text/css"><!--
    9 /* CSS Document */
    10 body {
    11 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    12 color: #4f6b72;
    13 background: #E6EAE9;
    14 }
    15 a {
    16 color: #c75f3e;
    17 }
    18 #mytable {
    19 700px;
    20 padding: 0;
    21 margin: 0;
    22 }
    23 caption {
    24 padding: 0 0 5px 0;
    25 700px;
    26 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    27 text-align: right;
    28 }
    29 th {
    30 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    31 color: #4f6b72;
    32 border-right: 1px solid #C1DAD7;
    33 border-bottom: 1px solid #C1DAD7;
    34 border-top: 1px solid #C1DAD7;
    35 letter-spacing: 2px;
    36 text-transform: uppercase;
    37 text-align: left;
    38 padding: 6px 6px 6px 12px;
    39 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    40 }
    41 th.nobg {
    42 border-top: 0;
    43 border-left: 0;
    44 border-right: 1px solid #C1DAD7;
    45 background: none;
    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 td.alt {
    57 background: #F5FAFA;
    58 color: #797268;
    59 }
    60 th.spec {
    61 border-left: 1px solid #C1DAD7;
    62 border-top: 0;
    63 background: #fff url(images/bullet1.gif) no-repeat;
    64 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    65 }
    66 th.specalt {
    67 border-left: 1px solid #C1DAD7;
    68 border-top: 0;
    69 background: #f5fafa url(images/bullet2.gif) no-repeat;
    70 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    71 color: #797268;
    72 }
    73 /*---------for IE 5.x bug*/
    74 html>body td{ font-size:11px;}
    75 --></mce:style><style type="text/css" mce_bogus="1">/* CSS Document */
    76 body {
    77 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    78 color: #4f6b72;
    79 background: #E6EAE9;
    80 }
    81 a {
    82 color: #c75f3e;
    83 }
    84 #mytable {
    85 width: 700px;
    86 padding: 0;
    87 margin: 0;
    88 }
    89 caption {
    90 padding: 0 0 5px 0;
    91 width: 700px;
    92 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    93 text-align: right;
    94 }
    95 th {
    96 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    97 color: #4f6b72;
    98 border-right: 1px solid #C1DAD7;
    99 border-bottom: 1px solid #C1DAD7;
    100 border-top: 1px solid #C1DAD7;
    101 letter-spacing: 2px;
    102 text-transform: uppercase;
    103 text-align: left;
    104 padding: 6px 6px 6px 12px;
    105 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    106 }
    107 th.nobg {
    108 border-top: 0;
    109 border-left: 0;
    110 border-right: 1px solid #C1DAD7;
    111 background: none;
    112 }
    113 td {
    114 border-right: 1px solid #C1DAD7;
    115 border-bottom: 1px solid #C1DAD7;
    116 background: #fff;
    117 font-size:11px;
    118 padding: 6px 6px 6px 12px;
    119 color: #4f6b72;
    120 }
    121
    122 td.alt {
    123 background: #F5FAFA;
    124 color: #797268;
    125 }
    126 th.spec {
    127 border-left: 1px solid #C1DAD7;
    128 border-top: 0;
    129 background: #fff url(images/bullet1.gif) no-repeat;
    130 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    131 }
    132 th.specalt {
    133 border-left: 1px solid #C1DAD7;
    134 border-top: 0;
    135 background: #f5fafa url(images/bullet2.gif) no-repeat;
    136 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    137 color: #797268;
    138 }
    139 /*---------for IE 5.x bug*/
    140 html>body td{ font-size:11px;}</style>
    141 <body>
    142 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
    143 <caption> </caption>
    144 <tr>
    145 <th scope="col" abbr="Configurations">Configurations</th>
    146 <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
    147 <th scope="col" abbr="Dual 2">Dual 2GHz</th>
    148 <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
    149 </tr>
    150 <tr>
    151 <th scope="row" abbr="Model" class="spec">lipeng</th>
    152 <td>M9454LL/A</td>
    153 <td>M9455LL/A</td>
    154 <td>M9457LL/A</td>
    155 </tr>
    156 <tr>
    157 <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
    158 <td class="alt">Dual 1.8GHz PowerPC G5</td>
    159 <td class="alt">Dual 2GHz PowerPC G5</td>
    160 <td class="alt">Dual 2.5GHz PowerPC G5</td>
    161 </tr>
    162 <tr>
    163 <th scope="row" abbr="Frontside bus" class="spec">Lennvo</th>
    164 <td>900MHz per processor</td>
    165 <td>1GHz per processor</td>
    166 <td>1.25GHz per processor</td>
    167 </tr>
    168 <tr>
    169 <th scope="row" abbr="L2 Cache" class="specalt">Black</th>
    170 <td class="alt">512K per processor</td>
    171 <td class="alt">512K per processor</td>
    172 <td class="alt">512K per processor</td>
    173 </tr>
    174 </table>
    175 </body>
    176 </html>



  • 相关阅读:
    JAVA实现的异步redisclient
    权限表设计
    操作系统之存储管理(续)
    leetcode第一刷_Jump Game
    linux之stat函数解析
    重温微积分 —— 偏微分与链式法则
    重温微积分 —— 偏微分与链式法则
    所谓敏感(数字的敏感)
    所谓敏感(数字的敏感)
    推理集 —— 特殊的工具
  • 原文地址:https://www.cnblogs.com/liugang/p/2228633.html
Copyright © 2011-2022 走看看