为什么不再在页面中使用 Table 而使用 DIV

美国的一个叫做Scott Design 的公司,做过一个关于CSS 网页布局与传统表格布局之间比较的讲演,生动有趣,今天的内容就是根据那次讲演的文档进行的讲解。

主要内容是希望说明为何使用表格排版为什么是不明智的。表格之所以存在于HTML 中,只是为了一个目的:显示表格状的数据。然而此后的border=”0″ 使得设计师可以将图片和文本放在这无形的网格中。迄今为止,表格仍然主导着视觉丰富的网站的设计方式,但它却阻碍了一种更好的、更有亲和力的、更灵活的,而且功能更强大的网站设计方法。下面我们开始寻找这个问题滋生的源头,并学习创建过渡性的,甚或完全不需表格的排版方式。

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

  • 把格式数据混入你的内容中。这使得文件的大小无谓地变大,而用户访问每个页面时都必须下载一次这样的格式信息。
    o 带宽并非免费。

  • 这使得重新设计现有的站点和内容极为消耗劳力(且昂贵)。

  • 这还使我们保持整个站点的视觉的一致性极难,花费也极高。

  • 基于表格的页面还大大降低了它对残疾人和用手机或PDA 浏览者的亲和力。

而使用CSS 进行网页布局这样一种工作方式,它会:

  • 使你的页面载入得更快

  • 降低你的流量费用

  • 让你在修改设计时更有效率而代价更低

  • 帮助你的整个站点保持视觉的一致性

  • 让你的站点可以更好地被搜索引擎找到

  • 使你的站点对浏览者和浏览器更具亲和力

  • 在世界上越来越多人采用Web 标准时,它还能提高你的职场竞争实力(事实上也就是降低失业的风险)。

我们还会讨论如何用层叠式样式表(CSS) ——也许是一个和你曾经采用的方式(表格) 有些微不同的——思维方式来处理你的内容和标记。

因此,解决方案就是使用CSS 与结构化标记,通过在HTML 文档中使用结构化的标记以及层叠式样式表来排版,我们可以使页面的实际内容与它们呈现的格式相分离。使用CSS 进行网页布局的基本思想就是:结构化标记,所写即所想,所想即所写。即便书写CSS 很简单,使用CSS 来排版却真的需要一种和我们以往有些不同的思维方式。

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

我们用h1 标记来标示最重要的头条;次一级的条目则用h2 来标记,以此类推;而段落则放在p 标记中。

这就是我们称之为“结构标记”或“语义标记”的东西。

你的内容将不放在表格和表格元素中,取代它们的是div 元素。还要给你的div 元素安排一个id 或class,不过这是为了描述它们的内容或功能,而非它们的外观。

在今天的讲解内容中,我们通过两个实例,演示了使用CSS 进行网页布局的基本思想,以及用这种方法与用表格布局相比,所带来的巨大的好处。

希望大家在看了这些讲解以后,在头脑中可以建立起来使用CSS/DIV 布局思维方式,以及Web 标准的意识,这样对今后在工作中更好地运用这些方法,都是具有十分重要的意义的。从玩弄表格技巧到遵循Web 标准首先,如果要重构一个用表格布局的网站,需要考虑好一个移植策略。是一口气把整个站点移植了呢,还是逐个逐个部分地一步步完成?

检查一下,找出会因为移植而受益的页面和分支。自然而然地,从首页、新产品通告之类的页面开始检查会比较好。

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

  • 主导航条

  • 子导航条

  • 页眉与页脚

  • 内容

  • 相关信息

  • 其他

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

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

  • 作为一个完美主义者,消灭所有的font 标记和间隔GIF 吧!

  • 同样的,一并搞定b 和br 标记。

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

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

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

可以使用“查找加替换”(或者正则表达式),不过最好的方法还是在浏览器里打开这个页面,然后把文本复制粘贴到你的HTML 编辑器里。

关键还是要用结构化的方式来思考!仅仅把b 标记替换为strong 是远远不够的。

最重要的条目是哪个?用h1 来标记它。次要一点的就用h2,依此类推。用p 来标记段落。把导航条标记为无序列表。

选定一个DOCTYPE 来使用。(我们推荐XHTML transitional,除非你是此道高手,否则别用XHTML strict。)

把你的页面合理分布在的div 中把你的主导航条放在一个id 属性设为mainnav 的div 中,子导航条则放在一个id 或者class 是subnav 的div 中。而页脚类似这个形式:[div id=”footer”],至于整个页面,它被放在[div id=”content”] 里边。即便现在它还不怎么讨人喜欢,但只要你开始给样式表添加规则,它就会马上变得可爱起来。

是开始自己编写CSS 的时候了。

首先,给每个div 设置一个边界。例如: div {border: 1px dotted gray;padding: .5em} 这可以帮助你完完整整地看到里边的内容,也不再需要卷动屏幕了。首先为以定义的元素编写CSS (html, body, p, h1, h2, ul, li, 等等。)尽量运用上下文相关或者有递归下降结构的选择符。这可以使得你的标记更清晰。例如:#subnav li {border: 1px solid black; padding: .5em; display: inline} 将能够只能影响你的子导航栏的div 中的列表项。

在尽可能多的浏览器下进行测试,毕竟你可以让朋友帮助你用它们自己的浏览器测试。