ASP CHINA [文档A0000779-表格边框样式的应用技巧]

点下面的运行代码查看:-)<br>

<body>
<style type="text/css">

</style>
<div class="ls">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
我们在显示数据库记录时，也许有时需要用一个表格把数据库中的记录列出来，当记录到了尾部，而表格的一行还未列完时，显示的表格线很不整齐，就象下面这样:<br>
<table border="1" cellspacing=0 cellpadding=0>
  <tr><td>3233</td><td>3233</td></tr> 
  <tr><td>3233</td><td></td></tr>
</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
这种情况其实用一个表格的样式就很好解决: <b>Border-Collapse</b>，使用这种样式可以很容易地画出一个细线表格，这个样式有两个可能的值：<b>collapse</b>和<b>separate</b>，意思是表格单元之间合并和分离。当使用<b>collapse</b>时，表格单元的边框和表格外框就合在一起了，看起来是一个很漂亮的细线表格：<br>
<p> &lt;table border=1 style=&quot;border-collapse:collapse&quot;&gt; <br>
<table border="1" style="border-collapse:collapse">
  <tr><td>3233</td><td>3233</td>
  <tr><td>3233</td><td></td></tr>
</table>

而当设置<b>Border-Collapse</b>的值是<b> separate</b> 时，表格单元和边框就分开了。<br>

<font color="red">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
我在找第一个表格边框的解决方法时，发现border的属性实在很多，简单地归纳一下供大家参考，高手的就不要见笑了:-)</font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>Border:</b> 默认设置是边框的宽度，如border=3，但也有几个内定值可以代替：<b>thin medium thick</b><br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>border</b>下面有几个属性：<b>width color style collapse</b>，一个一个来总结一下：<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>width:</b>下面细分为几个属性<b>Border-Top-Width Border-Right-Width Border-Botton-Width Border-Left-Width</b>，它们可以用 Border-Width按 上 右 下 左 的顺序组合成一组简写，中间用空格隔开，如: <br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
&lt;table border="1" style="border-width:1 2 5 7"&gt;（你可以试着减去一两个数字试试看看有什么效果)<br>
<table border="3" style="border-width:1 2 5 7">
  <tr><td>3233</td><td>3233</td></tr>
  <tr><td>3233</td><td>3233</td></tr>
</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>color:</b>下面细分为几个属性：<b>Border-Top-Color Border-Right-Color Border-Bottom-Color Border-Left-Color</b>，同width一样，它可以用<b> Border-Color</b>来简写，如： &lt;table border="1" style="border-color:red green blue gold"&gt;（当然也可应用于单个单元格）<br>

<table border="2" style="border-color:red lightgreen blue gold">
  <tr><td>3233</td><td>3233</td></tr>
  <tr><td>3233</td><td>3233</td></tr>
</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
另外：<b>BorderColorLight&nbsp;&nbsp;BorderColorDark</b> (注意Color和上面一组的位置不同)可以设置边框的明线和暗线颜色，表现出立体感：<br>
&lt;table border=3 bordercolorlight=#ffff99 bordercolordark=#ff9900&gt;  <br>
<table border="3" bordercolorlight="#ffff99" bordercolordark="#ff9900">
  <tr>
    <td>3233</td>
  </tr>
</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
这里有一个很经典的例子，当设置明暗线和背景色相同的时候，表格就会表现出一种类似按钮的效果：<br>
&lt;table border=1 bordercolorlight=white bordercolordark=white&gt; 
<TABLE cellSpacing=0 borderColorDark=#ffffff cellPadding=0  borderColorLight=#ffffff border=1>
<TBODY>
<TR align=middle>
<TD borderColorLight=#000000 bgColor=gainsboro borderColorDark=#eeeeee>&nbsp; 3233 &nbsp;  </TD>
<TD borderColorLight=#000000  bgColor=gainsboro borderColorDark=#eeeeee> &nbsp; 3233 &nbsp; </TD></TR></TBODY></TABLE>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<b>BorderStyle</b>，有 <b>BorderTopStyle BorderRightStyle BorderBottomStyle BorderLeftStyle</b>，同样可以简写为 <b>Border-Style:</b> <br>
<table border="3" style="border-style:dotted">
  <tr>
    <td>3233</td>
  </tr>
</table>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
style的值有<b>none dotted dashed solid double groove ridge inset window-inset outset</b>，具体什么自己试啦。<br>
 &nbsp; &nbsp; Collapse：上面一开始就说了。<br>
* 如果有什么不对的地方，请多指教。
</div>
</body>

运行代码拷贝代码保存代码 [可先修改部分代码再运行;请先检查代码确定安全]