为什么说table表格布局不好?

从我开始学html的第一天,老师就给我们灌输一个理念:现在流行的是div+CSS布局,千万不要用table布局。以至于后来看到很多招聘启示上,都把会写前端代码叫做“会DIV+CSS布局”。

其实从事实上讲,div布局方式比table布局方式的确效率更高,也更精简。让我们来了解一下table布局的缺点,明白为什么我们不用他。

1,嵌套深度

用table在页面放置一个元素,比如h3吧,结构如下:table>tr>td>h3(可能还有个tbody),而用DIV来做,一般只需要div>h3.太深的嵌套,会导致搜索引擎读取困难,而且,最直接的损失就是大大增加了冗余代码量。

2,灵活性

table有个特点,比如你第一行的第一列设置过width=”100″,那以后所有行的第一列你都不用再设置宽度了,永远都会等于你第1行第1列设置的宽度,绝对对齐。

这是他的一个优点,但用来做布局却成了缺点。

比如我的一个标题,有个图片装饰在左边,文字在右边,一般table布局就是装饰一个td,文字又一个td。但很可能下面的一行里面不需要这个装饰了,那么,就得给下面一行加上colspan。而且,如果宽度哪怕有一点点不对,就得再加一个td,有得再改变一下colspan的数值。

3,自动扩展性

表格有个很好的特点,就是自动扩展。比如你本来已经设置了他宽100,但如果里面有个大于100的元素,他会自动扩展这一格,挤压其他的格子,以便能放下这个东西。

当然,做布局时这个反而成了害人的特点了。

PS:怎么防止表格扩展?有个简单的办法就是在td里面加个DIV用来包裹你的东西,然后对DIV设置宽度,这样td就不会扩展了——不过,这样一来就应该算是div布局了吧?

4,混乱的colspan与rowspan

td的colspan与rowspan属性用来设置跨列与跨行,这是为了让表格更灵活。但用来布局时,频繁使用他们会造成整个文档顺序混乱。

html源代码的顺序很重要。搜索引擎一般是从源码开头顺序读取到结尾,但太多的跨行和跨列,会使本来排在前面的html被跨到后面,或者反过来——你可以查看源码看一下,就知道乱的有多么蛋疼了。

而且,跨行和跨列还是table最难点,一般人跨来跨去最后只有迷路的份。

———————————-未结束——————————

如果你看了以上几点,会不会认为table一无是处,应该永远打入冷宫画圈圈去呢?其实不是的,table是个很好的东西,table嘛,就是表格,像excel那样,用来做大量数据列表的时候是非常有用非常省力的。用来做布局就像让张飞去下厨一样,简直没用对地方,浪费人才。

2 评论

  1. 确实,table算不得好用了。。你们老师真有远见,我学html的时候,,老师咋就不提醒一下呢。。

发表评论

电子邮件地址不会被公开。