表格邊框魔鬼教程

一、表格中儲存格之間分隔線的隱藏方法

第 一 行 第 二 行 第 三 行	這個表格去掉了儲存格之間的縱向分隔線
第 第 第 一 二 三 列 列 列	這個表格去掉了儲存格之間的橫向分隔線
橫   線 豎   線 都 沒 了	這個表格去掉了儲存格之間的縱向分隔線和橫向分隔線
其實上面的三個表格都有三行三列，隱藏分隔線的訣竅在於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^

Power by Blueidea