《
DIV+CSS神话》文章地址：http://www.tfxk.com/wangyesheji/jianzhanjingyan/0302335212013.htm
如果你尽可能使用 CSS 而不是 Table 的属性,DIV+CSS理论技术入门，前面说了，发生的代码和 Div 的差异也不会很大，搜索引擎会轻视 <table> 标签吗，这种说法的根据我至今并没有找到。
--> [
网站建设之]DIV+CSS神话
作为一个身处 2008 年末的 Web 设计师，你是否好心思否认自己的代码中使用了 Table,
DIV+CSS总结 有用的3个网页制作技巧，如果是，你是一个有勇气的人,
DIV+CSS常见错误汇总，Web 设计是个奇异的行业，你可以将自己的
网站设计得像晚报的分类广告，或者楼道里的开锁广告，但千万别让人知道你使用了 Table，在你的源代码中发明 Table 就像一个销售被人掀起裤脚发现穿了白袜子一样。
也就是近几年的事，至多不外三五年，W3C是一个人人都以为重要但人人都不爱好的组织，他们的官方网站十分丑陋，我敢说平生没见过这么丑陋的网站，但他们的网站是为数未几的可以通过全体W3C标准验证的网站，这象征着，他们的网站在语法上，在构造上，在可访问性上是完美的，虽然仍旧十分丑陋,Div+CSS布局应该注重语义、代码的重用性。不过这是笑谈，W3C无比重要，否则微软会把全部 Web 开发工程师带到万劫不复的地步，还好，Netscape 逝世后，涅磐出 Firefox，而 Opera 在 Firefox 横空降生之后虽然没得到任何利益，至少得到了精力上的支持，看到没，终于有大哥出来整理你。乔布斯复出后，苹果重返昔日的光辉，这时人们才晓得世界上还有一个叫做 Safari 的浏览器，所有这一切加在一起，让 W3C 真正有了存在的必要。
这种布局作风在2000年代初，始终到中期依然非常风行，尤其海内，在大为美的潜意识下，人们把所有能塞到一个页面的东西都塞进了首页，Table 就像一个旧时期的管家，把所有货色虽不能井井有序，但至少是一样不少地编排起来。然而这样的 Web 终于到了让人讨厌的田地，跟着搜寻，RSS 订阅，以及以博客为代表的个性化 Web 的涌现，人们有更多渠道取得信息，而不用去拜访那多少个让人简直要晕从前的门户的首页，于是呈现了一种清爽的，轻量的 Web 风，应用更简略的布局，更明快的配色，大图标，大 Banner，以及更轻易浏览的大字体，同时，在这个时候，CSS 已经十分成熟，而 Firefox, Opera, Safari 为代表的阅读器，在遵照 W3C 尺度方面要远远好过 IE，人们终于意识到 CSS 的威力。由于 CSS 在布局上，其中心是一个 Box 模型，人们必需为 CSS 找一个能够依靠的容器对象。
Table 的所有不公正待遇就此开端。为什么说不公平，W3C 不倡议 Table 布局的时候，只说应使用 CSS 取代，这是什么意思，Table 不支撑 CSS 吗？当然支持，而且，因为 Table 作为老牌的 HTML 对象，它的位置曾如此重要，任何浏览器都对 Table 供给了最完善的支持，包含 CSS 支持。当人们拥抱 Div 的时候，仿佛忘却了 Table 也是 Box，而且是一个领有多个内格的 Box，Table 作为一个整体，和 Div 在 Box 模型方面不任何差别，而它的内格，除了 Margin 之外，仍旧是一个 Box，内格不含 Margin 概念这是应当懂得的。Div 很优良这不必说，然而当人们说 Div + CSS 的时候，好像暗示着 Table 无法 CSS，这是天大的误解。
本文的目标不是让你抛弃 Div 投身 Table，相反，如果 Div 能满意你的设计需要，Div 还是首选,Div+css布局及Web标准对网站优化及SEO方面的好处，但没必要避讳 Table，否则会走入另外一个极其。许多使用 Div 无法简单实现的设计，仍可以使用 Table,DIV+CSS对SEO有没有帮助，当然，不论使用什么，都应该用 CSS 将内容与润饰分别。Div + CSS 和 Table + CSS 都是正当的设计，谁更简单就用谁。依据我的教训，当你能预感你的内容的格式，对你即将加入的内容有才能完整把持其显示格式时，应该使用 Div + CSS；当你行将参加的内容是不固定的，你无法预见其格式，如果不想让页面坍塌，使用 Table + CSS 是一种保险的做法。
W3C 说，Table 可以用来包容文字，格局文字，图片，链接，表单，以及其它 Table ... 然而，Table 不应该单纯用来做网页布局（Tables should not be used purely as a means to layout document content），理由是，当 Web 被非可视化装备渲染的时候，Table 会出现问题，他们指定是屏幕阅读器以及盲文浏览器，另外，Table 在大型显示设备上会逼迫用户左右转动，因而，Web 设计者应该使用 CSS 而不是 Table。参见 W3C HTML 4.01 对于 Table 的定义。 W3C 说这段话的时候，是1999年12月24日，那时只管 CSS 早已诞生，但并没有多少人使用，最初的 Web 像一个在线版的文档，并没有成为当初这样的平台，不需要过多过多地斟酌布局问题，随着互联网第一次泡沫的构成，出现出大批的门户网站，门户网站是 Table 布局的始作俑者，因为他们的首页比一整份报纸的所有版面拼接在一起还庞杂，Table 在这方面十分顺手，联合 colspan 和 rolspan，你几乎可能实现任何复杂的版面。
Table 是如此丑恶，臃肿，哪怕只显示一段简单的内容，你也须要 <table><tr><td> 这三个基础的标签，每个标签里面还要加上一堆乌七八糟的属性，不像<div>，既简单，又整齐，又时尚，它和 CSS 珠联璧合，琴瑟协调，它们形成最完美的 Box 模型，他们象事实中的箱子，你把东西放进去，而后，很自在地对他们进行排列，腻烦了一种布局，不要紧，简单地修改一下 CSS 定义,div+css实现鼠标经过背景变色，一种全新的布局便出生了；不象 Table，Table 像食堂里的餐具柜，一排排，一列列，土里土气，油腻腻的，象咱们的父辈，肮脏，什么都往家里拿，胡乱堆在角落里，假如 Div 是小资，Table 就是老三届，他们不属于这个时代。
Div 成为荣幸者一方面因为它生成就是 Box 的最佳原型,DIV+CSS实现网页布局实例代码(2)，在语义上，Div 代表页面的一个区域，在形状上，它四四方方，更主要的是，它不像 <,DIV+CSS实现网页布局实例代码(1);P> 或 <a> 那样当时已经被赋予特别的语义（固然它们也能用于 Box 模型）；另一方面，则出于人们对 Table 统治一个臃肿时代的憎恨，一个时代的停止，继任者都会尽力抹去旧时代的痕迹，那些旧时代的象征或代表的运气多半如斯，人们并不是简单地忘记它们，而是决然毅然划清界线。
代码臃肿：你至少需要写下 <table><tr><td>这三个标签之后，才干开始真正的内容，另外，Table 的各种标签中还包括了复杂的属性定义，而 Div 只要 <div>一个标签。
页面渲染机能问题：浏览器需要将全部表格完全读完后才会开始渲染。
不利于搜索引擎优化：搜索引擎喜欢内容与修饰离开。
可访问性差：屏幕朗诵软件跟盲文浏览器无奈很好地舆解 Table 中的内容。
不够语义（Semantic）：我们需要语义的 Web。
Tag：Div+CSS Div+CSS
Div 支持的所有 CSS 属性，Table 全部支持，事实上，在 Div 大红大紫之前，那些 Div 的早期采取者曾信念不足地表现，Table 能做到，Div 都能，而他们也为本人的话付出了代价，打算在 Div 中实现垂直居中的人清楚我的意思，妄图在 IE6 中不经 CSS Hack 而实现 100% Div 布局的人更明确我的意思。100% Height 问题，几个 Div 之间的宽度自适应问题，信任任何从事 Div+CSS 设计的人会碰到。Table 在这方面的上风并不是因为它自身如许优秀，而是因为它老牌，没有浏览器敢疏忽，也因为它的特征底本如此，人们发现表格，是因为盼望数据显示得整洁，就这么简单。然而，为什么 Table 后来背上那么多的恶名？Div 拥戴者对 Table 的非难不过乎以下几条。
首先，Table 里面独一无法用 CSS 定义的属性只有 Cellspacing, Cellpadding 几个，其它属性都可以并且应当使用 CSS，这样，剩下的，就是 <table><tr><td> 和 <div> 的对决，我相信一个动辄几十K大小的网页，即使使用了几十个 Table，因此多出来的代码也可以疏忽不计，那些抱怨 Table 代码臃肿的人其实该检讨自己的编码习惯，能将 Table 写得十分臃肿的人，写 Div 比拟也未必会简练到哪里。
第3条：不利于搜索引擎优化
第1条：代码臃肿
第5条：不够语义
第4条：可访问性差
这是 Table 固有的缺点，不过多数 Div+CSS的拥趸好像并不是基于这个起因才排挤 Table。
语义 Web 的含意要深远得多，并不是仅仅在 Table 和 Div 上纠缠，即便 W3C,DIV+css完美实现Textarea效果，也并没有划定 Table 只能用来显示表格数据，良多在 Table 的语义长进行纠缠的人，实在不妨再等等 HTML 5，那才是真正的语义。
第2条：页面渲染性能问题
我使用一台2004年的笔记本电脑，1.6G 的 CPU 与 1G 内存，这种配置下，看不出 Table 布局和 Div 布局在页面渲染上有任何速度差别，其实这点差别即使有，绝对网络本身的延迟也可以忽略。
(责任编辑：网站建设)
DIV+CSS神话相关文章