漂亮的表格样式
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 > |
原文地址:https://www.cnblogs.com/taomylife/p/3287616.html