飞龙博客

飞龙博客 飞龙在天

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

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

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

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

所在分类: 网站开发

新作:

旧文:

blog money bui 教程 echarts 教程 eclipse 教程 html css 教程 IT趋势 js 教程 json 教程 mysql 教程 nodejs npm 教程 onblog SQLite 教程 tutorials vscode 教程 wap网站 winpe启动盘 wordpress 主机推荐 书法 前端开发 博客 名企名网 国学 域名注册 常用软件 建站程序 操作系统 教程 数码 无线上网 日记 电子商务 电脑笔记本 网站 网站优化 网站开发 网站推广 网站策划 网络 虚拟现实 默认