更全面和规范的表格css样式设计
飞龙修订于 20090811 10:16 65 次浏览这个表格的样式设计比飞龙规范简洁表格更规范,学到的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没标明单位,它并不......
网址:https://feilong.org/good-table-css2
初发:20090811 10:16
想学前端?长按二维码加我微信
分类: 网站开发