为什么不建议用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进行布局的更多相关文章
- html5常用标签table表格布局
html5常用标签table表格布局 一.总结 一句话总结: 二.html5常用标签table表格布局 用表格显示信息调理清楚,使浏览者一目了然.表格在网页中还有协助布局的作用,可以把文字.图像等组织 ...
- 为什么不建议用Table布局
Tables的缺点 1.Table要比其它html标记占很多其它的字节.(延迟下载时间.占用server很多其它的流量资源.) 2.Tablle会阻挡浏览器渲染引擎的渲染顺序.(会延迟页面的生成速度, ...
- 像table一样布局div
原文:http://www.456bereastreet.com/archive/200405/equal_height_boxes_with_css/ 下面是我翻译的内容,是根据我对文章的理解意译的 ...
- CSS技巧！像table一样布局div
摘自:http://www.cnblogs.com/hnyei/archive/2011/09/19/2181442.html 许多网页设计师都喜欢,将两个或者多个容器等高的并排放置,并在里面展示每个 ...
- display：table 表格布局
table 布局最大的特点 1.同行等高 2.宽度自动调节 那么table-cell是不是具备这个特点呢?答案是yes,为什么呢?css中有一个有意思的规则“创建匿名表格元素”. 拿table ...
- css display:table圣杯布局
圣杯布局指的是一个网页由页眉,3等高列(2个固定侧栏和中心内容主体)和贴在页面底部的页脚组成. 主要思路是对整个容器使用地上diaplay:table 的css规则,然后分别对页眉页脚使用displa ...
- 表格table样式布局设置
<style> table{ border-collapse:collapse; margin:0 auto;} table tr td{ border:1px solid #000; l ...
- 像table一样布局div的CSS属性详解
.equal { display:table; border-collapse:separate;margin: aut ...
- Grid实现table表格布局
HTML <div class="table"> <div class="th"> <div>日期</div> ...
随机推荐
- 枚举所有排列-STL中的next_permutation
枚举排列的常见方法有两种 一种是递归枚举 另一种是STL中的next_permutation //枚举所有排列的另一种方法就是从字典序最小排列开始,不停的调用"求下一个排列"的过程 ...
- 【摘录】JAVA内存管理-有关垃圾收集的关键参数
第八章 有关垃圾收集的关键参数 一些命令行参数可以用来选择垃圾收集器,指定堆或代的大小,修改垃圾收集行为,获取垃圾收集统计数据.本章给出一些最常用的参数.有关各种各样参数更多完整的列表和详细信息可以参 ...
- Win10 build package error collections
1. 打包Released的时候出现问题意思是说 本地项目,类里有这个Visibility属性不能进行序列化 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 error CS0029: 无法将 ...
- BAT三家互联网公司哪家更注重用户体验？
这几天百度的用户体验又成了设计圈关注的对象,李彦宏好不容易刷出来的好感度一下子被打入了冰点,通过此次事件,不难看出现在的互联网用户对于产品的体验要求越来越高,作为一名美图秀秀级别选手,很难领悟“好设计 ...
- CorelDRAW简单绘制的一杯满满的橙汁教程
CorelDRAW怎么画一杯橙汁?方法很简单,首先绘制一个闭合路径,执行线性渐变,填充颜色:复制图形,使用刻刀工具裁剪两半,更改不透明度:然后为橙汁增加底部椭圆:修剪橙子片:绘制吸管:最后加上一层橙子 ...
- ZBrush 笔刷的基础参数
ZBrush®中的笔刷基本参数主要包括3个:Draw Size(绘制大小).Focal Shift(焦点衰减)和Z Intensity(深度强度),通常使用这3个基本参数对笔刷进行调整. 在视图文档区 ...
- day13 基本的文件操作(好东西)
目录 基本的文件处理 什么是文件 如何使用文件 使用Python写一个小程序控制文件 open(打开文件) read: readline:一次性读取一行 del:删除 close:关闭 write(写 ...
- 使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: <body> <label id="test" onmouseover="show('test')"> 你瞅啥!?过来试试! & ...
- Day 07 数据类型的内置方法[列表,元组,字典,集合]
数据类型的内置方法 一:列表类型[list] 1.用途:多个爱好,多个名字,多个装备等等 2.定义:[]内以逗号分隔多个元素,可以是任意类型的值 3.存在一个值/多个值:多个值 4.有序or无序:有序 ...
- Day 05 流程控制
流程控制 if 判断 语法: if if...else if...elif...else if判断是干什么的呢?if判断其实是在模拟人做判断.就是说如果这样干什么,如果那样干什么. if...else ...