table

<table cellspacing="0" cellpadding="0" rules="none" width="200" border="1">   

第

一

行

二

三

這個表格去掉了單元格之間的縱向分隔線

列

這個表格去掉了單元格之間的橫向分隔線

橫

線

豎

都

沒

了

這個表格去掉了單元格之間的縱向分隔線和橫向分隔線

　　其實上面的三個表格都有三行三列，隐藏分隔線的訣竅在于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^

下面來講講如何來快速的實作細線表格拉

。。其實很簡單啊。。隻要在标題那邊嵌入一段小小的CSS就可以實作啦。雖然隻能實作細線表格。。但是一目了然。嘻嘻

<style type="text/css">

.table1{background:#000000;}

/* 這邊定義了表格的背景，也就是邊框的顔色 */

.table1 td, .table1 th{background:#FFFFFF}

/* 這邊定義了表格内的單元格背景是白色啦，就細線就這樣出現啦 */

</style>

這邊你也可以定義背景為圖檔啦。不一樣的圖檔會産生不一樣的邊框樣式哦

<table cellpadding="3" cellspacing="1" border="0" width="200" height="50" class="table1">

<tr>

<td></td>

</tr>

</table>

這邊的表格結構是不是很清楚啦。。其中關鍵的是要設定cellspacing為"1"還有就是定義它的class為"table1"。。關鍵的倆個千萬不能忘了哦，不然效果出不來的哦。。