飞龙设计最简洁规范css表格样式九点看法
feilong.org 修订于2009-08-10 09:38:10 617 次浏览晚上需要做个公司的规范表格，所有飞龙认真的研究了一下表格的样式设计规范问题。下面是飞龙的九点看法，做到代码最少，载入最快，容易修改，简洁清爽。相信这就是传说中的最简洁规范的表格了？本日志更新网址：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 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发