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

本页链接: http://www.scriptlover.com/static/222-table-border

标签:

相关文章

网友评论

Leave a comment

 required

 required (Not published)

 required