CSS控制,漂亮的表格样式
2008-11-04 18:58:00 | 【大 中 小】
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美化表格的样式,看起来非常的柔和、舒服
![](http://www.sharejs.com/uploadfiles/200811/20081104224515292655.jpg)
查看全部代码 View Code
第一步:
在网页<head>区添加样式定义
01 | < style type = "text/css" > |
05 | font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; |
23 | font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; |
28 | font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; |
30 | border-right: 1px solid #C1DAD7; |
31 | border-bottom: 1px solid #C1DAD7; |
32 | border-top: 1px solid #C1DAD7; |
34 | text-transform: uppercase; |
36 | padding: 6px 6px 6px 12px; |
37 | background: #CAE8EA url(images/bg_header.jpg) no-repeat; |
43 | border-right: 1px solid #C1DAD7; |
48 | border-right: 1px solid #C1DAD7; |
49 | border-bottom: 1px solid #C1DAD7; |
52 | padding: 6px 6px 6px 12px; |
63 | border-left: 1px solid #C1DAD7; |
65 | background: #fff url(images/bullet1.gif) no-repeat; |
66 | font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; |
70 | border-left: 1px solid #C1DAD7; |
72 | background: #f5fafa url(images/bullet2.gif) no-repeat; |
73 | font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; |
76 | /*---------for IE 5.x bug*/ |
77 | html>body td{ font-size:11px;} |
第二步:
在网页<body>区需要显示表格的地方加上如下代码
01 | < table id = "mytable" cellspacing = "0" summary = "The technical specifications of the Apple PowerMac G5 series" > |
04 | < th scope = "col" abbr = "Configurations" class = "nobg" >Configurations</ th > |
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 > |
11 | < th scope = "row" abbr = "Model" class = "spec" >lipeng</ th > |
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 > |
22 | < td class = "alt" >Dual 2.5GHz PowerPC G5</ td > |
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 > |
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 > |