Web 编程为什么越来越少用到 <table>
标签呢,这篇文章列出一些观点供大家参考:

本文部分内容转载自:

当IE8发布时,它将支持很多新的CSS
display属性值,包括与表格相关的属性值:table、table-row和table-cell,(ie6.7不支持)
。它标志着复杂CSS布局技术的结束,同时也给了HTML表格布局致命一击。最终,使用CSS布局来制作出类似于table布局的栅格将会变得十分迅速和简单。给HTML元素指定与表格相关的display属性值,使得它们像表格元素那样渲染。以下是这些可用的display属性值:
table 使该元素按table样式渲染 table-row 使该元素按tr样式渲染 table-cell
使该元素按td样式渲染 table-row-group 使该元素按tbody样式渲染
table-header-group 使该元素按thead样式渲染table-footer-group
使该元素按tfoot样式渲染 table-caption 使该元素按ion样式渲染 table-column
使该元素按col样式渲染 table-column-group 使该元素按colgroup样式渲染
table-cell特性 对宽度高度敏感 响应padding属性 内容溢出时会自动撑开父元素

  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吗?)

刚刚接触html的时候,利用table进行页面布局是比较容易的。但是,在实际的项目开发过程中,我们不建议用table进行布局,原因如下:

table-cell特性

Tables的好处

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

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

原文出处:
phrogz   译文出处:
webhek

  1. table比其它html标记占更多的字节。(造成下载时间延迟,占用服务器更多流量资源)
  2. table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间)
  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:)

对宽度高度敏感

table的好处

响应padding属性

在某些场合,使用table是完全合适、恰当和准确的。比如用table做表格。如果无法判断是否应该使用table,请问自己几个问题:

内容溢出时会自动撑开父元素

  • “是否这些行或者列的信息共享某一个属性?比如每行显示一个学生的信息,所有学生都有个‘姓名’属性。”
  • “如果我改变了这些行或者列的顺序,是不是依然有意义或者有同样的效果?”
  • “如果我将行变成列或者将列变成行,是不是依然有意义或者有同样的效果?”

问题1:table布局有什么缺点,为什么渐渐被淘汰?

如果答案仅仅是“我猜……也许不是”,那么就不应该用table。更多信息请参考“为什么用table布局不如HTML+CSS”。

Table会阻挡浏览器渲染引擎的渲染顺序。(会延迟页面的生成速度,让用户等待更久的时间。)
Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。(增加设计的复杂度,增加页面加载时间,增加HTTP会话数。)
在某些浏览器中Table里的文字的拷贝会出现问题
Table会影响其内部的某些布局属性的生效(比如里的元素的height:100%)
Table对对于页面布局来说,从语义上看是不正确的。
table一旦设计完成就变成死的,很难通过CSS让它展现新的面貌。

不用table怎样让两个span显示在同一行

问题2:table-cell的垂直居中?

在进行HTML+CSS布局的时候,经常会遇到需要将控件(span、div等)放到同一行的情况,参考下面的代码:

图片 1

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j"> 
<title>Insert title here</title> 
<style type="text/css"> 
    div { 
        width: 24px; 
        overflow-x:hidden; 
        white-space: nowrap; 
    } 

    span { 
        width: 15px; 
        display:inline-block; 
        border-style:solid; 
        border-width:1px; 
    } 
</style> 
</head> 
<body> 
    <div> 

    </div> 
</body> 
</html>

问题3:table-row的注意事项?

父层overflow-x:hidden可以避免当窗体大小发生改变时换行。这样对div和span进行CSS控制后,就可以避免使用table的tr进行页面布局,同时页面代码也更清晰。

请点击

ppt

简书