CSS 布局

近日开发中，总感觉页面布局方面力不从心。以前也曾学过这方面的内容，但是不够系统，因此我打算整理一下。

 

在web 页面中一般有 table 和 css+div 两种布局方式。

其中css+div 又分为原生css 和css 框架 两种。

现在一般网站已经不再使用table布局，但是一些简单对齐的页面也可以使用一下，因此在此处做一个简单的总结。

一、table 布局

html 标签中 跟table 布局相关的标签 有 <table> <th> <tr> <td>，另有两个比较重要的属性 是  rowspan，colspan。

table 布局也非常强大，在css 出现之前，所有的网页几乎都是用table 布局的。但是现在几乎不再使用了。以前看过的一话转载在此处：

为什么我们不建议用Table布局
    Table要比其它html标记占更多的字节。
    (延迟下载时间，占用服务器更多的流量资源。)
    Tablle会阻挡浏览器渲染引擎的渲染顺序。
    (会延迟页面的生成速度，让用户等待更久的时间。)
    Table里显示图片时需要你把单个、有逻辑性的图片切成多个图。
    (增加设计的复杂度，增加页面加载时间，增加HTTP会话数。)
    在某些浏览器中Table里的文字的拷贝会出现问题。
    (这会让用户不悦。)
    Table会影响其内部的某些布局属性的生效(比如<td>里的元素的height:100%)
    (这会限制你页面设计的自由性。)
    一旦学了CSS知识，你会发现使用table做页面布局会变得更麻烦。
    (先花时间学一些CSS知识，会省去你以后大量的时间。)
    table对对于页面布局来说，从语义上看是不正确的。
    (它描述的是表现，而不是内容。)
    table代码会让阅读者抓狂。
    (不但无法利用CSS，而且会你不知所云)
    table一旦设计完成就变成死的，很难通过CSS让它展现新的面貌。
    (你看过CSS Zen Garden吗?)

Tables的好处

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

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

英文：Why Tables Are Bad.
译文：webhek

 

table 布局需要使用table 标签把一块区域圈起来 ，化为布局区域，可以指定大小等,页面的内容应该放在<td> 标签内。

代码1：

<table width="500" height="500" border="1">
<tr>
<td>
这是一个table 布局
</td>
</tr>
</table>

代码1就在页面上布置了一个单元格，显示在了页面左上角。

如果我想把页面居中显示怎么办呢？方法就是在外层嵌套一个table ，然后把这个table 放在外层table 的td 单元格中，设置单元格对齐样式为居中。

代码2：

<table width="100%" border="1">
<tr>
<td align="center" valign="middle">
<table width="500" height="500" border="1">
<tr>
<td>
这是使用table 布局。
</td>
</tr>
</table>
</td>
</tr>
</table>

 

另外一个常用的就是合并单元格：包括横着合并和竖着合并。使用colspan 和rowspan 实现。

代码3：

<table width="100%" border="1">
<tr>
<td align="center" valign="middle" >
<table width="300" height="300" border="1">
<tr>
<td colspan="2">
这是使用table 布局。
</td>
<td>
这是使用table 布局。
</td>
</tr>
<tr>
<td>
这是使用table 布局。
</td>
<td rowspan="2">
这是使用table 布局。
</td>
<td>
这是使用table 布局。
</td>
</tr>
<tr>
<td>
这是使用table 布局。
</td>
<td>
这是使用table 布局。
</td>
</tr>
</table>
</td>
</tr>
</table>

 colspan="2"指定了该单元格占两列位置。

rowspan="2" 指定了该单元格占两行位置。

经过上面代码扩展，现在的表格布局效果如下图所示：

基本上复杂布局就靠表格之间的嵌套来实现，最复杂的布局甚至要几十个table 来嵌套完成。

另外表格还有很多属性和标签，设置不同的属性就能达到想要的效果。

下一篇介绍css 布局。