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%的人还看了以下文章

  • 汉字发展简史:甲骨文-金文-大篆-小篆-隶书-魏碑-草书-楷书-行书

    中国具有五千年文字历史,文字中所包涵的精髓,值得每一位设计师学习、继承与探究。设计师需要熟悉各种字体的风格特征,并能灵活运用字体进行编排设计,才能使作品的内容更清晰、更有条理地传达给读者。

    2023年1月18日 网页设计
    1.9K0
  • 一个优秀的网站设计应具备的6个特征

    1、明确和突出的品牌设计 优秀的网站设计师会将品牌的色彩、设计元素贯穿到整个网站的设计中。 2、抢眼独到的头条 网站要有强大的内容支撑。 首页是网站的脸,头条是这个网站的眼! 头条要抢眼,干脆,直击用户,在网页上要一目了然,是视觉焦点。清晰的排版和易于浏览的头条文章,是必须要有的。 3、有阶梯层级的导航 导航设计要简化,给人以“专业”的感觉。尽量让体验顺滑流…

    2018年9月23日
    2.2K0
  • 5个制作网站必须思考的问题,解决好这些才能提高访问量

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

    2018年2月28日
    2.0K0
  • 最全的前端开发框架介绍

    前端框架一般指用于简化网页设计的框架,比如,jquery,extjs,bootstrap等等,这些框架封装了一些功能,比如html文档操作,漂亮的各种控件(按钮,表单等等)。前段框架的好处:对于互联网的产品而言,前端用户体验往往决定了一款产品的竞争力和吸引力;而对于前端工程师来说,考虑的问题更为复杂,他们既要为网站上提供的产品和服务实现一流的Web页面、优化…

    2023年1月18日
    7460
  • 网页制作常用特殊符号大全

    网页常用特殊符号大全-最全的网页制作特殊符号。在做网页时经常会用到一些特殊符号,本文汇总了所有常用网页制作时用到的特殊符号包括18禁、爱心符号、货币符号、箭头符号、日语字符、 皇冠符号、emoji符号等。

    2018年2月19日
    6.0K0
  • 从零开始做APP界面设计三:字体选择 字号及配色方案

    上一篇《从零开始做APP界面设计二:App界面设计尺寸》我们学习了app界面设计尺寸规范,今天中国网页设计给大家分享App界面设计中字体的选用、字号设置及配色方案。 App界面设计标准色: 背景用色、文字用色、图标用色 App界面设计标准字: IOS:中文使用苹方字体  英文和数字使用Helvetica Android:中文使用思源黑体 英文和数字使用Rob…

    2018年4月22日
    5.5K0

发表回复

登录后才能评论