为什么我们不建议用Table布局

本文作者html5tricks,转载请注明出处

  1. Table要比其它html标记占更多的字节。
    (延迟下载时间,占用服务器更多的流量资源。)
  2. Tablle会阻挡浏览器渲染引擎的渲染顺序。
    (会延迟页面的生成速度,让用户等待更久的时间。)
  3. Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
    (增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)
  4. 在某些浏览器中Table里的文字的拷贝会出现问题。
    (这会让用户不悦。)
  5. Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
    (这会限制你页面设计的自由性。)
  6. 一旦学了CSS知识,你会发现使用table做页面布局会变得更麻烦。
    (先花时间学一些CSS知识,会省去你以后大量的时间。)
  7. table对对于页面布局来说,从语义上看是不正确的。
    (它描述的是表现,而不是内容。)
  8. table代码会让阅读者抓狂。
    (不但无法利用CSS,而且会你不知所云)
  9. table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。
    (你看过CSS Zen Garden吗?)

Tables的好处

在某些场合,使用Table是100%的适合、恰当和正确。比如,用table做表格是完全正确的。

如果你无法判断是否应该使用table,参考一下上面的几条,相信你能找到答案。

英文:Why Tables Are Bad.
译文:webhek

热门推荐

为什么我们不建议用Table布局》上有5条评论

  1. 聂庆鹏

    我也说说体会:
    第1. 如果只是创建一个1行1列,或者很少的几行几列的布局,table确实代码量大一些。尤其对于一个1行1列的表格来说,与相比确实冗繁很多。但这应该是从代码简洁度的角度来说,而不是“占用服务器更多的流量资源”。在当前的网络条件下,对于绝大多数网站来说,还没到靠节约几个html标记来降低服务器流量的——毕竟在加载一个网页过程中,html代码只是其很小比例的一部分。甚至是微不足道的一部分。
    第2。这个必须承认。table是整体载入后才开始显示的。但是,要提高网页加载速度,在table还是div上做文章意义不大。毕竟这已经不是电话拨号上网的时代了,电脑硬件性能也大幅度提升,HTML文件本身已经不足以成为网页显示速度的瓶颈。
    第3.关于切图的问题,要看具体设计的需要。表格有非常灵活的单元格合并功能,在局部布局中非常有效。综合使用背景图片、单元格合并等可以很大程度上避免一张图片切得很碎。
    第4.文字拷贝问题说得有点莫名其妙。首先,如果是大段文字,一般不需要放到table中,即使放了,也可以放在一个单独的td中,不知道对于拷贝文字有何影响?如果是分布在页面多个地方的文字,用div布局也有同样的问题。
    第5.table是一个M*N的二维表,横向和纵向都可以任意合并,而且表格还可以叠加、嵌套,一个页面不可能用一个table去布局,可能用几十个表格去布局,除了不能像div那样通过z-index让其漂浮到网页上层以外,我不知道还有什么布局用table会受到限制?div不过是一个1*1的box,和一行一列的表格一样,单从布局角度讲,div可以理解为table的一种。
    第6.不知道这是否只是楼主的个人感受。学了CSS后能发现CSS对元素外观的强大控制能力,而且CSS的主要优势在于两点:一是提供了更多控制元素属性的方法(很多HTML属性不能实现的控制),二是将HTML标记的属性从代码中剥离出来,实现了元素属性和元素标签的分离,非常有助于提高HTML代码的简洁性(只是代码变得简洁,而并不能是代码更可读,因为一个元素的属性必须通过元素id或名称去css文件中查找,而css文件往往臃肿而庞大,不如直接写在标签中那么一目了然)。至于“学了css后会发现用表格布局变得更麻烦”,完全是无稽之谈了。表格布局思路清楚,使用灵活。相反用div或其他等标记实现的表格效果,既要做好各种尺寸的计算和对齐方式的设计,又要保证浏览器的兼容性,其HTML代码虽然简单,但CSS代码书写的难度绝对高于书写一个TABLE。况且CSS也可以控制表格元素,包括每个单元格都可以控制。用table+CSS配合非常高效和灵活。最重要的是table没有浏览器兼容问题。
    第7.可能是我才疏学浅,楼主这种”语义“”内容“”表现“论高深莫测,让人不知道这和用不用table有什么关系。可能已经上升到了美学、哲学的高度,姑且不妄加评论。
    第8.楼主的这番话才有点让人不知所云。不知道为何table会让人抓狂。网页设计中table往往以一种较为简单的形态出现,用做布局时,行和列均比较少,一目了然。相反,用div等做的布局,如果只看HTML源代码,基本上不知所云,只有看了对应的CSS,才能去理解最终的效果。
    第9.楼主这一条说的比较笼统,应该举个具体的例子来说明观点。

    最后,我同意楼主的最后一句话”在某些场合,使用Table是100%的适合、恰当和正确。比如,用table做表格是完全正确的。“

    回复
  2. 聂庆鹏

    我也说说体会:
    第1. 如果只是创建一个1行1列,或者很少的几行几列的布局,table确实代码量大一些。尤其对于一个1行1列的表格来说,与相比确实冗繁很多。但这应该是从代码简洁度的角度来说,而不是“占用服务器更多的流量资源”。在当前的网络条件下,对于绝大多数网站来说,还没到靠节约几个html标记来降低服务器流量的——毕竟在加载一个网页过程中,html代码只是其很小比例的一部分。甚至是微不足道的一部分。
    第2。这个必须承认。table是整体载入后才开始显示的。但是,要提高网页加载速度,在table还是div上做文章意义不大。毕竟这已经不是电话拨号上网的时代了,电脑硬件性能也大幅度提升,HTML文件本身已经不足以成为网页显示速度的瓶颈。
    第3.关于切图的问题,要看具体设计的需要。表格有非常灵活的单元格合并功能,在局部布局中非常有效。综合使用背景图片、单元格合并等可以很大程度上避免一张图片切得很碎。
    第4.文字拷贝问题说得有点莫名其妙。首先,如果是大段文字,一般不需要放到table中,即使放了,也可以放在一个单独的td中,不知道对于拷贝文字有何影响?如果是分布在页面多个地方的文字,用div布局也有同样的问题。
    第5.table是一个M*N的二维表,横向和纵向都可以任意合并,而且表格还可以叠加、嵌套,一个页面不可能用一个table去布局,可能用几十个表格去布局,除了不能像div那样通过z-index让其漂浮到网页上层以外,我不知道还有什么布局用table会受到限制?div不过是一个1*1的box,和一行一列的表格一样,单从布局角度讲,div可以理解为table的一种。
    第6.不知道这是否只是楼主的个人感受。学了CSS后能发现CSS对元素外观的强大控制能力,而且CSS的主要优势在于两点:一是提供了更多控制元素属性的方法(很多HTML属性不能实现的控制),二是将HTML标记的属性从代码中剥离出来,实现了元素属性和元素标签的分离,非常有助于提高HTML代码的简洁性(只是代码变得简洁,而并不能是代码更可读,因为一个元素的属性必须通过元素id或名称去css文件中查找,而css文件往往臃肿而庞大,不如直接写在标签中那么一目了然)。至于“学了css后会发现用表格布局变得更麻烦”,完全是无稽之谈了。表格布局思路清楚,使用灵活。相反用div或其他等标记实现的表格效果,既要做好各种尺寸的计算和对齐方式的设计,又要保证浏览器的兼容性,其HTML代码虽然简单,但CSS代码书写的难度绝对高于书写一个TABLE。况且CSS也可以控制表格元素,包括每个单元格都可以控制。用table CSS配合非常高效和灵活。最重要的是table没有浏览器兼容问题。
    第7.可能是我才疏学浅,楼主这种”语义“”内容“”表现“论高深莫测,让人不知道这和用不用table有什么关系。可能已经上升到了美学、哲学的高度,姑且不妄加评论。
    第8.楼主的这番话才有点让人不知所云。不知道为何table会让人抓狂。网页设计中table往往以一种较为简单的形态出现,用做布局时,行和列均比较少,一目了然。相反,用div等做的布局,如果只看HTML源代码,基本上不知所云,只有看了对应的CSS,才能去理解最终的效果。
    第9.楼主这一条说的比较笼统,应该举个具体的例子来说明观点。

    最后,我同意楼主的最后一句话”在某些场合,使用Table是100%的适合、恰当和正确。比如,用table做表格是完全正确的。“

    回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>