表格CSS样式设计
1、比较简洁规范的表格样式，看图：
这是html源码:
代码
<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<
html
>
<
head
>
<
meta
http-equiv
="Content-Type"
content
="text/html; charset=utf-8"
>
<
title
>
最好最规范表格css样式设计飞龙看法九点
</
title
>
<
style
type
="text/css"
>
/*
红指表格样式,www.feilong.org 飞龙建议你把此样式抽出到样式文件，这样html代码更简洁。调用方式是：
<link rel="stylesheet" type="text/css" href="goodtable.css">
*/
#hongzhi
{
border-bottom-width
:
1px
;
border-left-width
:
1px
;
border-bottom-style
:
dotted
;
border-left-style
:
dotted
;
border-bottom-color
:
#999999
;
border-left-color
:
#999999
;
}
#hongzhi caption
{
font-size
:
14px
;
font-weight
:
bold
;
color
:
#FF0000
;
line-height
:
50px
;
}
#hongzhi td
{
text-align
:
center
;
font-size
:
12px
;
line-height
:
22px
;
border-top-width
:
1px
;
border-right-width
:
1px
;
border-top-style
:
dotted
;
border-right-style
:
dotted
;
border-top-color
:
#999999
;
border-right-color
:
#999999
;
}
#hongzhi strong
{
color
:
#FF0000
;
font-weight
:
normal
;
}
#hongzhi .bgcolor
{
background-color
:
#f3f3f3
;
}
</
style
>
</
head
>
<
body
>
<
table
width
="500"
border
="0"
cellpadding
="0"
cellspacing
="0"
id
="hongzhi"
summary
="红指公告"
>
<
caption
>
2009年8月红指公告
</
caption
>
<
tr
class
="bgcolor"
>
<
td
colspan
="2"
class
="bgcolor"
>
六次分红
</
td
>
<
td
>
150
</
td
>
<
td
>
200
</
td
>
<
td
class
="bgcolor"
>
500A
</
td
>
<
td
class
="bgcolor"
>
月度红指
</
td
>
<
td
class
="bgcolor"
>
800A
</
td
>
<
td
class
="bgcolor"
>
800B
</
td
>
<
td
class
="bgcolor"
>
500B
</
td
>
</
tr
>
<
tr
>
<
td
rowspan
="2"
>
达权红指
</
td
>
<
td
>
上半月
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
一次
</
td
>
<
td
><
strong
>
100
</
strong
></
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
>
下半月
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
二次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
rowspan
="6"
>
季度红指
</
td
>
<
td
>
季度一次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
三次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
>
季度二次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
四次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
rowspan
="2"
>
季度三次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
五次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
六次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
rowspan
="2"
>
季度四次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
七次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
rowspan
="3"
class
="bgcolor"
>
2009年
<
br
>
<
span
>
9
</
span
>
月发布
</
td
>
</
tr
>
<
tr
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
八次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
<
tr
>
<
td
>
年度红指
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
<
td
>
九次
</
td
>
<
td
>
</
td
>
<
td
>
</
td
>
</
tr
>
</
table
>
<
p
>
此为最好最规范的表格和样式设计演示，代码最少，载入最快，容易修改。详细说明参见网址：
<
a
href
="http://feilong.org/good-table-css"
>
http://feilong.org/good-table-css
</
a
>
欢迎使用。
</
p
>
<
p
>
</
p
>
<
p
><
script
type
="text/javascript"
>
<!--
google_ad_client
=
"
pub-7198199948466783
"
;
/*
300x250, 创建于 08-12-15
*/
google_ad_slot
=
"
0635093138
"
;
google_ad_width
=
300
;
google_ad_height
=
250
;
//
-->
</
script
>
<
script
type
="text/javascript"
src
="http://pagead2.googlesyndication.com/pagead/show_ads.js"
>
</
script
></
p
>
<
p
>
</
p
>
<
p
>
</
p
>
<
p
>
</
p
>
<
p
>
</
p
>
</
body
>
</
html
>