飞龙博客

妙法莲华经

飞龙设计最简洁规范css表格样式九点看法

feilong.org 修订于2009-08-10 09:38:10

晚上需要做个公司的规范表格,所有飞龙认真的研究了一下表格的样式设计规范问题。下面是飞龙的九点看法,做到代码最少,载入最快,容易修改,简洁清爽。相信这就是传说中的最简洁规范的表格了?本日志更新网址:http://feilong.org/good-table-css ,演示地址:http://feilong.org/code/good-table-css.htm  ,2009年8月10日飞龙第2次修订。关于网页网页架构思路可参考:http://feilong.org/web-structur-edesign 欢迎交流。

1.样式适用范围:不是网站的所有表格都需用到某样式,所以飞龙把此表格用id识别,有利于标签套用css样式。

2.样式调用方式:用<link rel="stylesheet" type="text/css" href="goodtable.css">来调用外部css文件,这比把样式直接写网页内更简洁规范。

3.此表格id样式:此id表格,字体最好居中对齐、12px。一般来说表格本身需设置宽度比如500px,飞龙(www.feilong.org)认为表格宽度不要超过600px,防止表格撑破正文区域。

4.表格边框设计:飞龙把此表格id设置下边框和做边框,同时给此表格td设置上边框与右边框,这样就实现了大家看到的虚线效果。

5. 表格标题规范:表格本身带有标题标签caption,飞龙认为不需再为表格加title/h2之类的标签。表格标题样式规范是:字号要大比如14px,行高要高比如50px,字体需加粗甚至加颜色。

6.表格字段样式:表格字段一般在第一行,如果需加背景颜色,只需给第一行的tr标签加样式。若给第一列加背景颜色,则等同于给第一列每个td单元格加样式,飞龙不推荐此方式。你也可以把字段名称加粗或加颜色。本条看法飞龙要求不严格。

7.列宽:表格最好不要设列宽,飞龙认为只需让它随数据长度自适应即可,如果你想尽量节省代码的话。如果某条数据太长,建议用br标签折行。本条看法飞龙要求不严格。

8.行高:表格也最好不要设行高,你可以在td样式里面自定义。如果某条数据太高,不用担心,该单元格会自适应的。本条看法飞龙要求不严格。

9.重点数据强调:如有需要强调的数据,可用strong或其它自定义标签,一般用strong即可。strong可以不采用加粗形式而是用色彩区分。

更新网址:https://feilong.org/good-table-css
最初发布:20090810 09:38:10 feilong.org 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文: