当前位置：首页 > 技术交流

网站建设用CSS控制表格边框

作者：潍坊设计　网址：http://www.536123.com/technology/table-border.htm

表格是网站建设常用的元素，表格默认的边框是双线，即使把表格边框调整成1，也是一条非常粗的线。如何才能把表格边框调整成1像素宽的线呢？潍坊设计为您介绍一下最好的处理方式。

早期表格设置1像素边框有一种方法，是用背景颜色来模拟，说是模拟，实际上显示出来的表格线并不是真正的线。方法很简单，把表格table的背景设置成需要的表格线的颜色，例如黑色，边框设置成0，间距设置成1，然后再选中所有单元格td，把单元格td的背景色设置成白色。这时表格边框看上去就是1像素的线了。

通过背景色设置虽然可以实现1像素的边框，但是使用起来非常麻烦，因为每一个表格都需要设置，而且表格代码增加了不少。其实还有更简单的办法，就是通过css来设置。

如果直接设置table和td的边框，那么边框线就是2像素。所以设置的时候需要技巧。

首先把table边框的右边框right和下边框bottom设置成实线、1像素宽、黑色。然后把td边框的左边框left和上边框top设置成实线、1像素宽、黑色。这样表格的边框就变成1像素的黑线了。当然也可以根据自己的需要设置成别的颜色。

使用css设置表格边框的好处是：

1. 可以把网站上的表格数据统一成一种格式，避免网站数据杂乱无章；
2. 不用设置所有表格，css可以自动加载到所有表格，减少网站建设的工作量和技术难度；
3. 更换表格样式的时候只需修改css，不用重新调整所有表格；
4. 最大限度的减少了Html代码量，减小网站文件大小，有利于网站seo优化。

下面是潍坊设计网站表格的样式，供大家参考

表格标题说明

表格表头	表格表头	表格表头	表格表头
表格内容	表格内容	表格内容	表格内容