细线表格的制作
在从事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"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
</tr>
<tr>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </td>
<td bgcolor="#FFFFFF"> </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"> </td>
<td class="td01"> </td>
<td class="td01"> </td>
</tr>
<tr>
<td class="td01"> </td>
<td class="td01"> </td>
<td class="td01"> </td>
</tr>
<tr>
<td class="td01"> </td>
<td class="td01"> </td>
<td class="td01"> </td>
</tr>
</table>
这种方法我采用的是类选择器，使用标签选择器也可实现同样效果
两种方法的优劣自己评估去吧，自由选用~~
参考文章：http://leotheme.cn/javascript/thin-table.html
http://www.mangguo.org/thin-border-table-browser-compatible-writing-method/