Table布局 VS Div+CSS布局,选哪个?

Table布局 VS Div+CSS布局,选哪个?

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

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

  1. Table要比其它html标记占更多的字节。
    (延迟下载时间,占用服务器更多的流量资源。)
  2. Tablle会阻挡浏览器渲染引擎的渲染顺序。
    (会延迟页面的生成速度,让用户等待更久的时间。)
  3. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
    (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)
  4. Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
    (这会限制你页面设计的自由性。)
  5. 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。
    (先花时间学一些CSS知识,会省去你以后大量的时间。)
  6. table对对于页面布局来说,从语义上看是不正确的。
    (它描述的是表现,而不是内容。)
  7. 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

(3)
江山如画的头像江山如画管理团队
上一篇 2018年12月20日 下午2:39
下一篇 2018年12月24日 下午3:15

99%的人还看了以下文章

  • 网页制作实战项目九:飘城旅行社(分步教程2)

    网页制作实战项目九:飘城旅行社(分步教程)精 在上一课中,我们学习了实战项目九-首页的制作,今天来实现其他主要页面:旅游资讯。 练习一:PC端固定布局 地址:http://www.125jz.com/wp-content/demo/20190113demo1.html  练习二:流体移动布局 地址:马上上线 练习三:兼容响应式布局 地址:马上上线 1.导航下…

    2019年1月22日
    5.5K0
  • 提高网页制作水平的7个要点

    1. 学好HTML和CSS编程 这是网页设计中最基础,也是最重要的部分。《web前端开发学习路线》 2. 清晰的导航 导航栏是页面中最重要的部分,因为它是用户使用网站最主要的途径。通过使用简单清晰的导航栏,可以提升网站的易用性,还可以减少用户在寻找自己需要的内容时遇到的麻烦。 3. 高质量的图片 高质量的图片,能大大提升网站的逼格。图片应当辅助你的设计来推销…

    2019年7月9日 网页设计
    2.7K0
  • 5个制作网站必须思考的问题,解决好这些才能提高访问量

    决定做一个网站前,站长们需要深入思考这5大问题。如果你能妥善地解决好这些问题,那你的网站一定会吸引用户,访问量大增。

    2018年2月28日
    2.1K0
  • 制作漂亮网页的窍门

    我们浏览任何一个网页,仅从界面上就可以轻易的识别出专业和非专业的区别,那么怎么才能让网页设计的专业、漂亮、好看?这就要涉及到美术的一些基本常识。首先网页风格的形成主要依赖于网页的版式设计,页面的色调处理,还有图片与文字的组合形式等。

    2019年11月16日 网页设计
    2.9K0
  • 界面设计的字体规范:常用字体,字号,字体颜色及间距对齐

    今天125网页设计给大家分享界面设计中常用的字体,字号,字体颜色及间距对齐的一些小经验,通过设计经验可以帮助你做出更好的版式,相信大家会有收获。 一、常见界面设计中字体使用问题 1.字体样式太多,导致页面杂乱 2.使用的字体不易识别 3.字体样式和内容的气氛或规范不匹配 二.界面设计中文字的使用规则 移动端常规字体 IOS:常选择华文黑体或者冬青黑体,尤其是…

    2018年12月29日 网页设计
    7.9K0
  • web前端工程师需要掌握哪些知识,0基础学习Web前端课程大纲

    想从事Web前端开发,需要掌握哪些知识? 中文网页设计网今天给大家分享0基础学习Web前端的课程大纲,从入门到精通,帮助你快速成长为Web前端工程师。 Web前端基础课程大纲 第一阶段:HTML+CSS 第二阶段:JavaScript基础知识 第三阶段:DOM、BOM与事件 第四阶段:面向对象与数据交互 第五阶段:JavaScript实战 第六阶段:数据类型…

    2018年10月24日
    2.3K0

发表回复

登录后才能评论