细线表格的制作

在从事web网页程序开发时,table是我们常用的html标签,为了页面美观,细线表格是web开发中基础的要求,也不知道当初制定html标准时是怎么想的,明明设置了table的border="1",非要将表格边框实际大小变成了2px,搞得每次用时还得重新写css进行控制.下边就总结两种在网上搜集的方法,以备随时查阅:

一、通过表格背景颜色和单元格背景颜色结合，将表格边框设置为1px

<table width="95%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#000000">
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
    <td bgcolor="#FFFFFF">&nbsp;</td>
  </tr>
</table>

 

 二、完全通过css进行控制

css代码：

 

<style type="text/css"> 
<!-- 
.table01{ 
border-collapse:collapse; 
} 

.td01{ 
background:#FFF; 
border:solid 1px #f90; 
height:22px; 
} 
--> 
</style>

 html代码：

<table width="95%" align="center" class="table01">
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
  <tr>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
    <td class="td01">&nbsp;</td>
  </tr>
</table>

这种方法我采用的是类选择器，使用标签选择器也可实现同样效果 

 

两种方法的优劣自己评估去吧，自由选用~~

 

参考文章：http://leotheme.cn/javascript/thin-table.html

               http://www.mangguo.org/thin-border-table-browser-compatible-writing-method/