1、表格边框探秘 table 及如何快速实现细线表格一、表格中单元格之间分隔线的隐藏方法第 一 行第 二 行第 三 行这个表格去掉了单元格之间的纵向分隔线第 第 第一 二 三列 列 列这个表格去掉了单元格之间的横向分隔线横 线竖 线都 没 了这个表格去掉了单元格之间的纵向分隔线和横向分隔线其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于 rules,察看这三个表格的源代码,我们可以看到标签中都有 rules。 它有三个参数(cols,rows,none),当 rules=cols 时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当 rules=rows 时,则 隐藏了横向的分隔线,这样
2、我们只能看到表格的列;而当 rules=none 时,纵向分隔线和横向分隔线将全部隐藏。二、表格边框的隐藏普 表通 格 这是一普通的表格不怕 下雨只显示上边框下起雨来 该怎么办 只显示下边框上不着天 下不着地只显示左、右边框两边走开老子姓王 只显示上、下边框左右 为难 只显示左边框左右为难 只显示右边框光秃秃 全脱了不显示任何边框表格边框的显示与隐藏,是可以用 frame 参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。只显示上边框 只显示下边框 只显示左、右边框 只显示上、下边框 只显示左边框 只显示右边框 不显示任何边框 三、表格边框普 表通 格这是一普通的表格普 表通 格 细
3、表线 格表格加上了漂亮的细线(利用 cellspacing1 像素间隙和表格与单元格背景的不同)细 表 线 格 细 表线 格这和上面那个可不一样,它用的是CSS,效果却一样。(对单元格 border 的定义)细 表 线 格 细 表线 格再进一步,把边框变成虚线,同样是 CSS 的神奇作用。细 表 线 格 细线表格的扩展应用,奥妙就是在第个单元格中再套入一个表格。立 表体 格立体感的表格(简单的亮暗边框设置,注意只有IE 支持这种效果)立 表 体格 无名表格 给表格加上一个表头(应用和标签)无名表格 表中表效果给表头再加个框(用 CSS 为定义一个边框)表中表效果 表中表效果看起来和上面的一样,
4、可是这个才是真正的表中表哦。(在中插入一个表格)表中表效果 这一节要靠你自己去发现了,因为这样学到的东西才是真正属于自己的(我的一个偷懒的借口) 。 我已经在每个表格的下面写出了重点,并在右边给出它的源代码,你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格,有兴趣也研究研究吧 o下面来讲讲如何来快速的实现细线表格拉 。其实很简单啊。只要在标题那边嵌入一段小小的 CSS 就可以实现啦。虽然只能实现细线表格。但是一目了然。嘻嘻.table1background:#000000;/* 这边定义了表格的背景,也就是边框的颜色 */.table1 td, .table1 thbackground:#FFFFFF /* 这边定义了表格内的单元格背景是白色啦,就细线就这样出现啦 */这边你也可以定义背景为图片啦。不一样的图片会产生不一样的边框样式哦这边的表格结构是不是很清楚啦。其中关键的是要设置 cellspacing 为“1“还有就是定义它的 class为“table1“。关键的俩个千万不能忘了哦,不然效果出不来的哦。