本文部分内容转载自：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进行布局的更多相关文章

  1. html5常用标签table表格布局

    html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...

  2. 为什么不建议用Table布局

    Tables的缺点 1.Table要比其它html标记占很多其它的字节.(延迟下载时间.占用server很多其它的流量资源.) 2.Tablle会阻挡浏览器渲染引擎的渲染顺序.(会延迟页面的生成速度, ...

  3. 像table一样布局div

    原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...

  4. CSS技巧！像table一样布局div

    摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...

  5. display：table 表格布局

    table 布局最大的特点 1.同行等高 2.宽度自动调节   那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则“创建匿名表格元素”.   拿table ...

  6. css display:table圣杯布局

    圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...

  7. 表格table样式布局设置

    <style> table{ border-collapse:collapse; margin:0 auto;} table tr td{ border:1px solid #000; l ...

  8. 像table一样布局div的CSS属性详解

    .equal {                     display:table;                     border-collapse:separate;margin: aut ...

  9. Grid实现table表格布局

    HTML <div class="table"> <div class="th"> <div>日期</div> ...

随机推荐

  1. matlab基本语法

    MATLAB基本语法 点乘运算 , 常与其他运算符 点乘运算,常与其他运算符联合使用(如.\) 矩阵生成 矩阵生成 向量生成或子阵提取本节将会介绍一些MATLAB的基本语法的使用. 持续更新... 在 ...

  2. Python—使用xml.sax解析xml文件

    什么是sax? SAX是一种基于事件驱动的API. 利用SAX解析XML文档牵涉到两个部分:解析器和事件处理器. 解析器负责读取XML文档,并向事件处理器发送事件,如元素开始跟元素结束事件; 而事件处 ...

  3. [makefile]如何设置不同目录的代码(.c)，生成到指定目录下(./debug/.o))

    部分代码跟makefile不在同一目录,有没有好的方法来设置依赖关系,我找到三种方法,但感觉都不完美,下面我会把他列出来并加以说明,不知有没有更好的方法,makefile本身也不是很熟,请大家指教: ...

  4. Spark RDD概念学习系列之什么是Pair RDD

    不多说,直接上干货! 什么是Pair RDD (1)包含键值对类型的RDD被称作Pair RDD. (2)Pair RDD通常用来进行聚合计算. (3)Pair RDD通常由普通RDD做ETL转换而来 ...

  5. addFooterView(v)与 addHeaderView(v)之后 头或者尾部没有加上去

    myExpandableListView.addHeaderView(headView); myExpandableListView.addFooterView(footerView); 原因很简单: ...

  6. jquery获取自定义属性的值

    //获取属性值 1 <div id="text" value="黑哒哒的盟友"><div> jQuery取值: $("#tex ...

  7. Eclipse中删除GIT分支

    删除GIT分支: 删除分支时不能直接删除本分支,所以要切换到另一分支,即非删除分支. 1.右击项目——Team——Advanced——Delete Branch...: 2. 在弹出的Delete b ...

  8. zabbix-server端监控MySQL服务

    Zabbix 监控MySQL数据库 为server.zabbix,com 添加服务模块 创建MySQL服务图形 Server.zabbix.com 服务器操作 [root@server ~]# cd ...

  9. Day73-CMDB（资产管理采集）的三种实现方式

    # 采集数据 import subprocess import requests ret = subprocess.getoutput('ipconfig') # print(ret) # 正则处理获 ...

  10. BZOJ 4990 [USACO17FEB] Why Did the Cow Cross the Road II P (树状数组优化DP)

    题目大意:给你两个序列,你可以两个序列的点之间连边 要求:1.只能在点权差值不大于4的点之间连边 2.边和边不能相交 3.每个点只能连一次 设表示第一个序列进行到 i,第二个序列进行到 j,最多连的边 ...