table边框设置问题分析及解决
日期:2008-12-01 阅读:465 分类:HTML~CSS
在web开发中,设置table边框是再常见不过的事情了,但通常都是怎么去实现的呢?
今天刚好和一位朋友在msn上探讨了这个问题,简单做如下总结:
1.定义table的cellpadding设置为0,cellspacing设置为1,然后根据table和td背景色的不同给人的感觉就像表格的边框一样;这样不失为一种不错的方法,但有时候我们需要将这些属性转移到css中,以便实现HTML Tags和css style的分离,这样就显得不很友好了。
2.索性将table的cellpadding,cellspacing都设置为0,直接在td中定义border,主要是利用边框的缺失拼起来的;这样做可以将样式都分离到css中,但不好的一点是设置太过复杂,我们会将一个td设置1到2种样式。
3.在css中定义td的border-top,border-left(当然只要是水平和垂直方向上都可以),然后在定义table的边框,注意一定是要和td设置的对应,这样可以完全的实现属性定义和css的分离。
4.先将table的cellspacing设置为0,然后设置td的border-spacing:1px;和border就可以了。
虽然第三,和四种方法看起来不错,但也算是写了额外的处理,我们还是寄希望于w3c早日指定出一套更规范的属性来控制table边框。
因为里面的样式与站点样式可能有点冲突,因此第一种方案会显示的不正确,大家可以到这里查看效果。
http://scriptlover.com/upload/0812011632049002.html
今天刚好和一位朋友在msn上探讨了这个问题,简单做如下总结:
1.定义table的cellpadding设置为0,cellspacing设置为1,然后根据table和td背景色的不同给人的感觉就像表格的边框一样;这样不失为一种不错的方法,但有时候我们需要将这些属性转移到css中,以便实现HTML Tags和css style的分离,这样就显得不很友好了。
2.索性将table的cellpadding,cellspacing都设置为0,直接在td中定义border,主要是利用边框的缺失拼起来的;这样做可以将样式都分离到css中,但不好的一点是设置太过复杂,我们会将一个td设置1到2种样式。
3.在css中定义td的border-top,border-left(当然只要是水平和垂直方向上都可以),然后在定义table的边框,注意一定是要和td设置的对应,这样可以完全的实现属性定义和css的分离。
4.先将table的cellspacing设置为0,然后设置td的border-spacing:1px;和border就可以了。
虽然第三,和四种方法看起来不错,但也算是写了额外的处理,我们还是寄希望于w3c早日指定出一套更规范的属性来控制table边框。
第一种方案:
第二种方案:
第三种方案:
第四种方案:
http://scriptlover.com/upload/0812011632049002.html
相关文章
- JS操作table(表格) 2011-09-28
- Hashtable和HashMap的简单比较 2010-07-13
- border:0和border:none的差别 2011-08-04