html中表格布局还是div布局,Table布局 VS Div+CSS布局，选哪个？

Table布局 和 Div+CSS布局的争论，过了7-8年了，今天看到一篇文章《为什么我们不建议用Table布局》，又想发表下自己的见解，供初学

《为什么我们不建议用Table布局》节选：

Table要比其它html标记占更多的字节。

(延迟下载时间，占用服务器更多的流量资源。)

Tablle会阻挡浏览器渲染引擎的渲染顺序。

(会延迟页面的生成速度，让用户等待更久的时间。)

Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。

(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)

Table会影响其内部的某些布局属性的生效(比如

里的元素的height:100%)

(这会限制你页面设计的自由性。)

一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。

(先花时间学一些CSS知识，会省去你以后大量的时间。)

table对对于页面布局来说，从语义上看是不正确的。

(它描述的是表现，而不是内容。)

table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。

其实，Table布局 VS Div+CSS布局两者各有特色，不能盲目的一味追求DIV而否定TABLE。

Table最大的好处是容易上手。

表格是方便但访问速度慢，所谓的“浏览快慢”其实是在带宽有限的情况下，由于需要等待载入时间，而表现出的快慢。

表格的特性是：只有在表格体内的内容全部载入完后，才一次性显示该表格。因为，当表格内容很多时，容易出现“载入慢”的情况。这在设计的时候尽量避免就可以了。

div+css的特性是：载入一点就显示一点，因此有“载入快”的说法。

table什么时候用呢?

数据类的表格用table标签做非常适合。

还有就是用于网站管理后台，不需要提交给搜索引擎的时候，table做大大加快了页面编写的速度。

所以，并不是完全用div+css就完美了，主要是根据实用准则。

建议：

主要使用在div+css来避免大容量表格的出现，在一些细节处理上，有时候用表格来得简单有效。一些比较成熟的大网站都是如此。

如果是数据类的表格可以用table标签，如果只是单纯为了展示表格分栏的样式，则无需采用table，可使用display:table或者display:flexbox去实现。

表格其实和 div+css 一样优秀。

125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/2957.html