漂亮的表格代码

  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>



原文地址:https://www.cnblogs.com/liugang/p/2228633.html