漂亮的表格样式
| 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 |
| 2级缓存 | 512K per processor | 512K per processor | 512K per processor |
用CSS美化表格的样式，看起来非常的柔和、舒服
第一步：
在网页<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 |
width: 700px; |
16 |
padding: 0; |
17 |
margin: 0; |
18 |
} |
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 |
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> |
