table css 样式

CSS Tables


Configurations	Dual 1.8GHz	Dual 2GHz	Dual 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
图秀卡	512K per processor	512K per processor	512K per processor

  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" rel="stylesheet" type="text/css" />
  7 </head>
  8 <style type="text/css">
  9 /* CSS Document */
 10 
 11 body {
 12 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 13 color: #4f6b72;
 14 background: #E6EAE9;
 15 }
 16 
 17 a {
 18 color: #c75f3e;
 19 }
 20 
 21 #mytable {
 22 width: 700px;
 23 padding: 0;
 24 margin: 0;
 25 }
 26 
 27 caption {
 28 padding: 0 0 5px 0;
 29 width: 700px;
 30 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 31 text-align: right;
 32 }
 33 
 34 th {
 35 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 36 color: #4f6b72;
 37 border-right: 1px solid #C1DAD7;
 38 border-bottom: 1px solid #C1DAD7;
 39 border-top: 1px solid #C1DAD7;
 40 letter-spacing: 2px;
 41 text-transform: uppercase;
 42 text-align: left;
 43 padding: 6px 6px 6px 12px;
 44 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
 45 }
 46 
 47 th.nobg {
 48 border-top: 0;
 49 border-left: 0;
 50 border-right: 1px solid #C1DAD7;
 51 background: none;
 52 }
 53 
 54 td {
 55 border-right: 1px solid #C1DAD7;
 56 border-bottom: 1px solid #C1DAD7;
 57 background: #fff;
 58 font-size:11px;
 59 padding: 6px 6px 6px 12px;
 60 color: #4f6b72;
 61 }
 62 
 63 
 64 td.alt {
 65 background: #F5FAFA;
 66 color: #797268;
 67 }
 68 
 69 th.spec {
 70 border-left: 1px solid #C1DAD7;
 71 border-top: 0;
 72 background: #fff url(images/bullet1.gif) no-repeat;
 73 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 74 }
 75 
 76 th.specalt {
 77 border-left: 1px solid #C1DAD7;
 78 border-top: 0;
 79 background: #f5fafa url(images/bullet2.gif) no-repeat;
 80 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
 81 color: #797268;
 82 }
 83 /*---------for IE 5.x bug*/
 84 html>body td{ font-size:11px;}
 85 </style>
 86 <body>
 87 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
 88 <caption> </caption>
 89 <tr>
 90 <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
 91 
 92 <th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th>
 93 <th scope="col" abbr="Dual 2">Dual 2GHz</th>
 94 <th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th>
 95 </tr>
 96 <tr>
 97 <th scope="row" abbr="Model" class="spec">lipeng</th>
 98 <td>M9454LL/A</td>
 99 
100 <td>M9455LL/A</td>
101 <td>M9457LL/A</td>
102 </tr>
103 <tr>
104 <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
105 <td class="alt">Dual 1.8GHz PowerPC G5</td>
106 <td class="alt">Dual 2GHz PowerPC G5</td>
107 
108 <td class="alt">Dual 2.5GHz PowerPC G5</td>
109 </tr>
110 <tr>
111 <th scope="row" abbr="Frontside bus" class="spec">地图名片</th>
112 <td>900MHz per processor</td>
113 <td>1GHz per processor</td>
114 <td>1.25GHz per processor</td>
115 
116 </tr>
117 <tr>
118 <th scope="row" abbr="L2 Cache" class="specalt">图秀卡</th>
119 <td class="alt">512K per processor</td>
120 <td class="alt">512K per processor</td>
121 <td class="alt">512K per processor</td>
122 </tr>
123 
124 </table>
125 
126 </body>
127 </html>

posted on 2011-01-20 10:39 Dufe王彬阅读(374) 评论(0) 编辑收藏举报