html中表格细边框的四种实现及其比较

第一种

使用css

<!---=========华丽的分隔线。。===================-->

 <style>
.box {
 border-top-width: 1px;
 border-right-width: 0px;
 border-bottom-width: 0px;
 border-left-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
}
.box td {
 border-top-width: 0px;
 border-right-width: 1px;
 border-bottom-width: 1px;
 border-left-width: 0px;
 border-top-style: solid;
 border-right-style: solid;
 border-bottom-style: solid;
 border-left-style: solid;
 border-top-color: #000000;
 border-right-color: #000000;
 border-bottom-color: #000000;
 border-left-color: #000000;
 text-align: center;
 font-size: 13px;
 font-weight: bold;
 word-break:   break-all;
}
</style>

<table width="640" height="480" border="1"  cellspacing="0" cellpadding="0" class="box">
<tr>
 <td>&nbsp;</td>
</tr>
<tr>
 <td>&nbsp;</td>
</tr>

<tr>
 <td>&nbsp;</td>
</tr>

</table>

<!---=========华丽的分隔线结束===================-->

 

 

第二种,使用ie中特有的属性,不支持除ie外的浏览器

 

<!---=========忧伤的分隔线start===================-->
<table width="640" height="480" border="1"  cellspacing="0" cellpadding="0" bordercolordark="#FFFFFF" bordercolorlight="#000000">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

<!---=========忧伤的分隔线end===================-->

 

 

第三种，整个表格的背景为黑色，每个单元格背景为白色，单无格间距为1,表格粗细为0

<!---=========痛苦的分隔线start===================-->

  <table width="200" border="0" cellpadding="2" cellspacing="1" bgcolor="#000000">
    <tr>
      <th bgcolor="#FFFFFF" colspan="2">背景设置式－细边框表格</th>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">text</td>
      <td bgcolor="#FFFFFF">text</td>
    </tr>
    <tr>
      <td bgcolor="#FFFFFF">text</td>
      <td bgcolor="#FFFFFF">text</td>
    </tr>
  </table>

<!---=========痛苦的分隔线end===================-->

 

第四种 啥也不说了，直接代码表示(一个style="BORDER-COLLAPSE:collapse"搞定)

<!---=========漂亮的分隔线start===================-->

<table width="640" height="480" border="1"  cellspacing="0" cellpadding="0" bordercolor="#000000" style="BORDER-COLLAPSE: collapse">
<tr>
 <td>&nbsp;</td>
</tr>
<tr>
 <td>&nbsp;</td>
</tr>

<tr>
 <td>&nbsp;</td>
</tr>
  

</table>

<!---=========漂亮的分隔线end===================-->

 

 

比较：

第一种和第四种支持 ie和ff但是第四种更简单一些

第三种也支持所有浏览器，但实现起来比较麻烦，很痛苦

第二种虽然实现简单但是兼容性差，只支持ie

第四种自我感觉最好用