登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

中老年人学电脑摄影博客

摄影采风、摄影作品欣赏、摄影指导、摄影教程、后期制作教程

 
 
 

日志

 
 
关于我

我从事中老年人摄影、计算机教育行业,在哈尔滨老年人大学任教,在从事摄影、计算机教育13年当中11年从事中老年人摄影、计算机教育,是国内最早从事中老年人计算机教育者之一,给我的感觉是中老人学得快,忘的快,人非常好,乐观向上。是我学习的榜样,我非常感谢中老年朋友,让我在学习和工作中得到了宝贵财富。

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

2011-01-18 12:12:56|  分类: HTML |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

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

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


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

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


二、表格边框的隐藏

这是一普通的表格

   

只显示上边框
   
只显示下边框

 
 

只显示左、右边框
 
 
只显示上、下边框

 
 

只显示左边框
 
 
只显示右边框

 
 
不显示任何边框

表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不影晌单元格。
只显示上边框 <table frame=above>
只显示下边框 <table frame=below>
只显示左、右边框 <table frame=vsides>
只显示上、下边框 <table frame=hsides>
只显示左边框 <table frame=lhs>
只显示右边框 <table frame=rhs>
不显示任何边框 <table frame=void>


 

三、表格边框
这是一普通的表格
<table border="1" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td>普</td><td>表</td></tr><tr align="center"> <td>通</td><td>格</td></tr></table>
线
表格加上了漂亮的细线
(利用cellspacing1像素间隙和表格与单元格背景的不同)
<table border="0" width="200" cellspacing="1" cellpadding="0" bgcolor="#000000" ><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">细</td><td bgcolor="#FFFFFF">表</td></tr><tr align="center" bgcolor="#FFFFFF"> <td bgcolor="#FFFFFF">线</td><td bgcolor="#FFFFFF">格</td></tr></table>
线
这和上面那个可不一样,它用的是CSS,效果却一样。
(对单元格border的定义)
<table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">细</td><td style="BORDER-top: rgb(0,0,0) 1px groove; BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">表</td></tr><tr align="center"> <td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-left: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">线</td><td style="BORDER-bottom: rgb(0,0,0) 1px groove; BORDER-right: rgb(0,0,0) 1px groove">格</td></tr></table>
线
再进一步,把边框变成虚线,同样是CSS的神奇作用。
<table width="200" cellspacing="0" cellpadding="0"><tr align="center"> <td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">细</td><td style="BORDER-top: rgb(0,0,0) 1px dotted; BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">表</td></tr><td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-left: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">线</td><td style="BORDER-bottom: rgb(0,0,0) 1px dotted; BORDER-right: rgb(0,0,0) 1px dotted">格</td></tr></table>
 
 
 
 
细线表格的扩展应用,奥妙就是在第个单元格中再套入一个表格。
<table width="200" border="0" cellspacing="2" cellpadding="0"><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td></tr><tr> <td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td><td> <table width="100%" border="0" cellspacing="1" cellpadding="0" bgcolor="#000000"> <tr> <td bgcolor="#FFFFFF"> </td> </tr> </table></td></tr></table>
立体感的表格
(简单的亮暗边框设置,注意只有IE支持这种效果)
<table border="1" bordercolorlight="#ffffff" bordercolordark="#ffffff" width="200" cellpadding="0" cellspacing="0"><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >立</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >表</td></tr><tr align="center"> <td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >体</td><td bgcolor="#B7B7B7" bordercolorlight="#000000" bordercolordark="#eeeeee" >格</td></tr></table>
无名表格

给表格加上一个表头
(应用<fieldset>和</legend>标签)
<table width="200" cellpadding="0" cellspacing="0"><tr> <td><fieldset style="width:200" align="center"> <legend> 无名表格 </legend> <p align="right"> </fieldset></td></tr></table>
表中表效果Ⅰ
给表头再加个框
(用CSS为<legnd>定义一个边框)
<table width="200"" cellspacing="0" cellpadding="0"><tr> <td><fieldset style="width: 200; color: #B7B7B7; border-style: groove" align="center"> <legend style="color: blue; border: 1 solid #000000"> 表中表效果Ⅰ</legend> <br></fieldset></td></tr></table>
表中表效果Ⅱ

看起来和上面的一样,可是这个才是真正的表中表哦。
(在<legnd>中插入一个表格)
<table width="200"><tr> <td><fieldset style="width:200" align="center"> <legend> <table style="border: 1 solid #000000" width="80" cellspacing="1" cellpadding="0" height="20"><tr> <td><font color=blue>表中表效果Ⅱ</font></td></tr></table></legend><br></fieldset></td></tr></table>

将有这样的效果:

栏目一 栏目二 栏目三
A B
C D
E F
G H I
J K
L

生成:

原有
插入
表格
  评论这张
 
阅读(1285)| 评论(1)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018