w3pop.com :: 网络学院 :: WEB设计综合 :: 细线表格制作方法
细线表格制作方法
作者:chinahtml.com 翻译/整理:w3pop.com 发布:2007-06-01 浏览:15211 ::
::
早期在CSS不是很盛行的时候，就有很多朋友在追求着做细线表格的方法，网上也流传着一些方法，记得以前我这个乡下人也收集过，不过不知道有没有放 在blog里，人懒也就不去翻了，有兴趣的朋友随便就翻翻吧。不过今天呢，我想跟大家说说的捏就是以前我自己是没接触的一个方法，不知道大家晓得不啦。如果晓得那就甭看下去了，浪费宝贵时间不好；如果不晓得的朋友可以借鉴一下，还不错的哦。
首先呢还是给大家看一下以前个人比较常用一个方法，表格套表格你也模糊挖。简单说一下这个方法：
最外面一个大的一行一列的表格，设置单元格颜色（也就是后面的边框色）；然后套一个你需要的表格，间距为1就，并把每个单元格的背景色设置为白色。
这里方法麻烦的就是表格套表格，而且代码也比较多比较杂，当然也是可以用CSS来简化一下，可惜简化的也只能是样式，没办法解决表格套表格的问题。
HTML代码
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#FF0000">
<tr>
<td><table width="600" border="0" cellspacing="1" cellpadding="0">
<tr>
<td bgcolor="#FFFFFF">linxz.cn</td>
<td bgcolor="#FFFFFF">linxz.cn</td>
<td bgcolor="#FFFFFF">linxz.cn</td>
</tr>
<tr>
<td bgcolor="#FFFFFF">linxz.cn</td>
<td bgcolor="#FFFFFF">linxz.cn</td>
<td bgcolor="#FFFFFF">linxz.cn</td>
</tr>
</table></td>
</tr>
</table>
然后呢再说一下今天的“主角”，用CSS样式来控制表格，把它变成细线表格。大家都知道在CSS中border是可以控制边框的样式跟颜色的，但是如果用一个表格加上border样式的话，那是要加在table呢还是tr或者是td里呢，如<table style="border:1px solid #F00">或者<tr style="border:1px solid #F00">或者<td style="border:1px solid #F00">， 其实加哪个都不好，如果是table那就是外边框有细线了，如果是tr那就是该行是细线了，而如果是td呢，那基本上可以说满足我们的需求了，但是可以发 现有的地方线条是粗的。为什么呢，其实很简单，因为td跟td之间有重叠的位置啊，所以就是2px而不是我们要的1px线了；那如果针对td做的 border不是四边而是对border-top、border-right、border-bottom、border-left分别在需要的位置设置 呢，这个当然可以实现要求了，不过这样的话，代码就增加了很多。
其实简单的方法还是有的，只要把td跟td之间的重叠位置的线条合并在一起就可以了，先看一下这个效果。
<style type="text/css">
table{
width:600px;
margin:0px auto;
font:Georgia 11px;
color:#333333;
text-align:center;
border-collapse:collapse;
}
table td{
border:1px solid #f00;
width:100px;
height:30px;
}
</style>
<table>
<tr>
<td>linxz.cn</td>
<td>linxz.cn</td>
<td>linxz.cn</td>
</tr>
<tr>
<td>linxz.cn</td>
<td>linxz.cn</td>
<td>linxz.cn</td>
</tr>
</table>
上面的这个效果也就是我们想要的细线的表格，而这个呢其实就是控制td的样式border:1px solid #f00;可为什么会我会在这个之前说td上控制边框会有重叠，而现在这个没有呢。因为加了一句border-collapse:collapse;后把重叠的线条合并了，所以就有1px的线没了2px的线。
小小总结一下：做细线表格，用border-collapse:collapse;定义在table中，然后对td做border:1px solid #f00;边框样式定义即可。
评论 (0)
All
