更全面和规范的表格css样式设计
feilong.org 修订于2009-08-11 10:16:00 您好，第 317 位朋友！这个表格的样式设计比飞龙规范简洁表格更规范，学到的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 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发