码迷,mamicode.com
首页 > 其他好文 > 详细

为什么不建议用table进行布局

时间:2015-03-11 18:40:32      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

本文部分内容转载自:http://www.html5tricks.com/why-not-table-layout.html

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

  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:http://www.csszengarden.com/

table的好处

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

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

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

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

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

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

为什么不建议用table进行布局

标签:

原文地址:http://www.cnblogs.com/urwlcm/p/4330276.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!