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

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

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

table比其它html标记占更多的字节。（造成下载时间延迟，占用服务器更多流量资源）
table会阻挡浏览器渲染引擎的渲染顺序。（会延迟页面的生成速度，让用户等待更久的时间）
table里显示图片时需要你把单个、有逻辑性的图片切成多个图。（增加设计的复杂度，增加页面加载时间，增加http会话数）
在某些浏览器中，table里的文字的拷贝会出现问题。（会让用户不悦）
table会影响其内部的某些布局属性的生效（比如<td>里的元素的height:100%) （限制页面设计的自由性）
一旦学了CSS的知识，你会发现使用table做页面布局会变得更麻烦。（先花时间学一些CSS知识，会省去你以后大量的时间）
‘table对’对于页面布局来说，从语义上看是不正确的。（它描述的是表现，而不是内容）
table代码会让阅读者抓狂。（不但无法利用CSS，而且会不知所云，尤其在进行页面改版或内容抽取的时候）
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进行布局

最新文章

热门文章