飞龙博客

feilong.org 前端开发教程

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

飞龙修订于 20090811 10:16 10 次浏览

这个表格的样式设计比飞龙规范简洁表格更规范,学到的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

想学前端?长按二维码加我微信

想学前端?点击飞龙QQ

分类: 网站开发

新作:

旧文:

关闭

长按二维码 -> 识别图中二维码

打开微信,发现,扫一扫

支付完成后,点击下一步

感谢大力支持

然后你手机号:

最后点这,稍等即可