为什么网页布局用DIV CSS 不用 Table 表格

DIV CSS VS TABLE

网页布局DIV CSS 不用 Table 表格

到现在这已不是个问题了，可还是有很多公司给别人做网站的时候使用TABLE表格， 这种过时的布局，所以有

必要说一说。

请看下面这些问题

0.Table布局页面会带来哪些问题

1.Table布局为什么是不明智？

2.DIV CSS页面布局 为什么这么火爆？

3.DIV CSS页面布局 能给我们的网站带来什么好处 ？

4.DIV CSS布局页面 为什么会提高效率,降低成本？

5.DIV CSS布局页面 对SEO 网站推广 有什么影响？

6.DIV CSS布局页面为什么会提高页面的亲和力？

8.DIV CSS排版比Table有哪些优势？

9.为什么会使网站保持视觉一致性变得那么容易？

为何使用表格排版为什么是不明智的

表格之所以存在于 HTML 中，只是为了一个目的：显示表格状的数据

但它却阻碍了一种更好的、更有亲和力的、更灵活的，而且功能更强大的网站设计方法

我们来看这个问题滋生的源头，并学习创建过渡性的，甚或完全不需表格的排版方式。

使用表格进行页面布局会带来很多问题问题：

1 把格式数据混入你的内容中。

o Table使得文件的大小无谓地变大，而用户访问每个 页面时都必须下载一次这样的格式信息。

o 客户的时间和带宽也是有限的。

2 Table使得重新设计现有的站点和内容极为消耗劳力，且昂贵

3 Table使我们保持整个站点的视觉的一致性极难，花费也极高。

4 Table的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力

而使用DIV CSS进行网页布局这样一种工作方式

1 DIV CSS 布局 使页面载入得更快 ，降低流量费用

3 DIV CSS 布局 在修改设计时更有效率而代价更低

4 DIV CSS 布局 帮助整个站点保持视觉的一致性更容易

5 DIV CSS 布局 让站点可以更好地被搜索引擎找到

6 DIV CSS 布局 使站点对浏览者和浏览器更具亲和力

7 DIV CSS 布局 在世界上越来越多人采用 Web 标准时，对于网站制作人员来说还能 提高职场竞争实力

层叠式样式表 (DIV CSS) 方式来处理内容和标记。

因此，使用DIV CSS 与结构化标记来排版，可以使页面的实际内容与呈现的样式相分离。

使用DIV CSS进行网页布局的基本思想：结构化标记，所写即所想，所想即所写。

排版时考虑的不是“这个东西放在这儿，那个东西放在那儿”，而是页面中信息的类别和信息的结构。

我们称之为“结构标记”或“语义标记”的东西: 比如，用 h1标记来标示最重要的头条，次一级的条目则用 

h2 来标记，以此类推；而段落则放在 p标记中。

内容将不放在表格和表格元素中，取代它们的是 div 元素。给 div 元素安排一个 id 或 class，是为了描述

它们的内容或功能，而非外观。

使用DIV CSS进行网页布局，这种方法与用表格布局相比，好处巨大。

下面说说如何，遵循 Web 标准，使用DIV CSS进行网页布局

首先，如果要重构一个用表格布局的网站，需要考虑好一个移植策略。找出会因为移植而受益的页面和分支

如果已经把站点的内容分好了类，那么分析每个页面，把它们按照逻辑关系进行分解

* 主导航条

* 子导航条

* 页眉与页脚

* 内容

* 相关信息

* 其他

注意分析由嵌套表格、空白分隔符和边框元素组成的表格结构 (因为我们希望把它们替换为用 div 标记组织的

那种简单得多的表格结构)。

检查应该替换的标记

一旦分析好页面的结构，就可以着手揭开表象，分析你现在的页面代码中可以转换成结构化标记的那些地方。

* 作为一个完美主义者，消灭所有的 font 标记和间隔 GIF

* 同样的，一并搞定 b 和 br 标记。

* 去除表格中的那些外观标记 (bgcolor, background 等等)

* 把纯粹用来表示外观的那些 DIV CSS 调用 改成结构化的标记。

把描述外观的标记改为描述结构的标记

要用结构化的方式来思考！

仅仅把b 标记替换为 strong 是不够的。

最重要的条目用 h1 来标记

次要点的就用 h2, 依此类推

用 p 来标记段落

把导航条标记为无序列表。

选定一个 DOCTYPE 来使用

(推荐 XHTML transitional，除非你是此道高手，否则别用 XHTML strict。)

把页面合理分布在的 div 中, 把主导航条放在一个 id 属性设为 mainnav 的 div 中，

子导航条则放在一个 id 或者 class 是 subnav 的 div 中。

而页脚类似这个形式：[div id=”footer”]，页面放在 [div id=”content”]

运用上下文相关或者有递归下降结构的选择符,这可以使得你的标记更清晰。<br>

例如：#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导

航栏的 div 中的列表项。

在尽可能多的浏览器下进行测试

原文地址：http://blog.sina.com.cn/s/blog_969555e301011rql.html