Table布局 和 Div+CSS布局的争论，过了7-8年了，今天看到一篇文章《为什么我们不建议用Table布局》，又想发表下自己的见解，供初学网页制作的新手参考。
《为什么我们不建议用Table布局》节选：
- Table要比其它html标记占更多的字节。
(延迟下载时间，占用服务器更多的流量资源。) - Tablle会阻挡浏览器渲染引擎的渲染顺序。
(会延迟页面的生成速度，让用户等待更久的时间。) - Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
(增加设计的复杂度，增加页面加载时间，增加HTTP会话数。) - Table会影响其内部的某些布局属性的生效(比如
<td>里的元素的height:100%)
(这会限制你页面设计的自由性。) - 一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。
(先花时间学一些CSS知识，会省去你以后大量的时间。) - table对对于页面布局来说，从语义上看是不正确的。
(它描述的是表现，而不是内容。) - table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
(你看过CSS Zen Garden吗?)
其实，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
微信扫一扫 
支付宝扫一扫