表格邊框探祕table及如何快速實現細線表格

weixin_34162629發表於2011-09-28
一、表格中單元格之間分隔線的隱藏方法
 
第 一 行
第 二 行
第 三 行
 這個表格去掉了單元格之間的縱向分隔線

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

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

相關文章