表格:(3)表格边框
图例
  
原代码

细 表
线 格
 
利用cellspacing=1像素间隙和表格与单元格背景的不同。
<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="160" 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="160" 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>

 
 
 
 
 
细线表格的扩展应用，奥妙就是在第个单元格中再套入一个表格。

立 表
体 格
 
简单的亮暗边框设置，注意只有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>

 
  <table width="100%" bgcolor="#DADAB4" style="BORDER-TOP: #000000 1px solid;BORDER-bottom: #000000 1px solid">

您的笔名
<table width="100" border="1" cellspacing="1" cellpadding="4" bgcolor="#868686" bordercolor="#FFFFFF" align="center">
<tr>
<td align="center" > 您的笔名 </td>
</tr>
</table>

 
<table width="100" border="1" cellspacing="0" cellpadding="4" bordercolor="#000000" bordercolordark="#FFFFFF" bgcolor="#cddef5"align="center">
<tr>
<td align="center">&nbsp;</td>
</tr>
</table>
 
<style>
.Box{
background-color: #F7F7F7;
border-top-width: 2px;
border-bottom-width: 2px;
border-top-style: solid;
border-bottom-style: solid;
border-top-color: #FFFFFF;
border-bottom-color: #FFFFFF;}
</style>

 
 <table border=1 bordercolor=#0099ff height=20 style="color:#ffffff;BORDER-BOTTOM: double; BORDER-LEFT: double; BORDER-RIGHT: double; BORDER-TOP: double;" width=300>
<tr><td>&nbsp;</td></tr></table>