飞龙博客

妙法莲华经

更全面和规范的表格css样式设计

feilong.org 修订于2009-08-11 10:16:00 263 次浏览

这个表格的样式设计比飞龙规范简洁表格更规范,学到的table表格相关知识也更全面。演示地址在:http://feilong.org/code/good-table-css2.htm 你只需把演示页另存到本地电脑再打开即可分析学习。该表格css样式设计详细文字说明参见更新网址:http://feilong.org/good-table-css2 飞龙2009年8月11日第1次修订,2011年。

此表格样式设计包括了表格id样式,表格标题caption样式,横向字段th样式(列字段),纵向字段th样式与轮换样式(行字段),以及数据单元格td的样式与轮换样式。同时对表格的描述summary,对字段单元格的简介abbr,对字段单元格属于横向的还是纵向的也进行了说明scope=col(列字段)还是row(行字段)

数据单元格的边框样式设计,一般是:上一行的列(td)有右下边框,下一行交替列(td.alt)也有td的右下边框并附加了背景色(.alt)。这样设计避免了边框重叠变粗。整个数据单元格(td与td.alt的残缺部分被th的上右下 边框、以及.spec.specalt的左边框 给补完整了。这种做法比飞龙设计更复杂,但合理区分字段单元格数据单元格,并产生了行与行之间的交替变化

表格边框最细莫过于1px,但不能在table标签设置border=1,因为这里的1没标明单位,它并不等于1px。应该设为border=0,然后用css样式来定义表格边框。而用css定义表格边框一般用到上面提到的补缺法,在飞龙设计的规范简洁表格里面也涉及到表格边框css设计。

本表格源作者是veerle 此表格设计样式很绚丽并用到了背景图片,飞龙这里没用图片,只留下图片背景css写法。更多漂亮规范表格css设计制作:icant

更新网址:https://feilong.org/good-table-css2
最初发布:20090811 10:16:00 feilong.org 于广州

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

所在分类: 网站开发

新作:

旧文: