您的位置:首页网页设计HTML/CSS  → 表格边框魔鬼教程

表格边框魔鬼教程

时间:2004/11/7 2:41:00来源:本站整理作者:蓝点我要评论(0)

 


一、表格中单元格之间分隔线的隐藏方法



























这个表格去掉了单元格之间的纵向分隔线
















这个表格去掉了单元格之间的横向分隔线














  线
  线
这个表格去掉了单元格之间的纵向分隔线和横向分隔线



  其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到标签中都有rules。 它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这样我们就只能看到表格的行;当rules=rows时,则 隐藏了横向的分隔线,这样我们只能看到表格的列;而当rules=none时,纵向分隔线和横向分隔线将全部隐藏。







二、表格边框的隐藏




































这是一普通的表格









不怕 下雨
   

只显示上边框








   
下起雨来 该怎么办
只显示下边框









上不着天  
  下不着地

只显示左、右边框








  两边走开
老子姓王  
只显示上、下边框









左右  
为难  

只显示左边框








  左右
  为难
只显示右边框









光秃秃  
  全脱了
不显示任何边框



表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。
只显示上边框
只显示下边框

只显示左、右边框

只显示上、下边框

只显示左边框

只显示右边框

不显示任何边框

 





三、表格边框







































这是一普通的表格








线
表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)








线
这和上面那个可不一样,它用的是CSS,效果却一样。
(对单元格border的定义)








线
再进一步,把边框变成虚线,同样是CSS的神奇作用。












 




 




 




 
细线表格的扩展应用,奥妙就是在第个单元格中再套入一个表格。








立体感的表格
(简单的亮暗边框设置,注意只有IE支持这种效果)





无名表格

给表格加上一个表头
(应用
和标签)





表中表效果Ⅰ
给表头再加个框
(用CSS为定义一个边框)









表中表效果Ⅱ

看起来和上面的一样,可是这个才是真正的表中表哦。
(在中插入一个表格)



  这一节要靠你自己去发现了,因为这样学到的东西才是真正属于自己的(我的一个偷懒的借口)。 我已经在每个表格的下面写出了重点,并在右边给出它的源代码,你可以对照着看。下面还有一 个边框会自己变颜色闪动的表格,有兴趣也研究研究吧 ^o

相关阅读 Windows错误代码大全 Windows错误代码查询激活windows有什么用Mac QQ和Windows QQ聊天记录怎么合并 Mac QQ和Windows QQ聊天记录Windows 10自动更新怎么关闭 如何关闭Windows 10自动更新windows 10 rs4快速预览版17017下载错误问题Win10秋季创意者更新16291更新了什么 win10 16291更新内容windows10秋季创意者更新时间 windows10秋季创意者更新内容kb3150513补丁更新了什么 Windows 10补丁kb3150513是什么

文章评论
发表评论

热门文章 没有查询到任何记录。

最新文章 页面进入效果表单 XHTML校验需要注意的6个细节CSS样式表创建美妙绝伦的网站了解XHTML DHTML SHTML之间的区别HTML小技巧的一些小技巧

人气排行 容易被误解的overflow:hiddenCSS中dashed和dotted的区别CSS水平和垂直居中的几种实现方法DIV+CSS自适应高度兼容IE6,ie7,ie8和FF的解css优先级问题如何用CSS实现图片圆角化处理超链接target=_blank的使用方法Ctrl+H键的用法