表格边框魔鬼教程

一、表格中单位格之间分割线的湮没本领

第

一

行

第

二

行

第

三

行

这个表格去掉了单位格之间的纵向分割线

第

第

第

一

二

三

列

列

列

这个表格去掉了单位格之间的横向分割线

横

线

竖

线

都

没

了

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

　　本来上头的三个表格都有三行三列，湮没分割线的窍门在乎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>

　　这一节要靠你本人去创造了，由于如许学好的货色才是真实属于本人的（我的一个躲懒的托辞）。 我仍旧在每个表格的底下写出了中心，并在右边给出它的源代码，你不妨比较着看。底下再有一 个边框会本人变脸色闪烁的表格，有爱好也接洽接洽吧 ^o^