作为一个身处 2008 年末的 Web 设计师，你是否好意思承认自己的代码中使用了 Table，如果是，你是一个有勇气的人，Web 设计是个奇怪的行业，你可以将自己的网站设计得像晚报的分类广告，或者楼道里的开锁广告，但千万别让人知道你使用了 Table，在你的源代码中发现 Table 就像一个销售被人掀起裤脚发现穿了白袜子一样。
Table 是如此丑陋，臃肿，哪怕只显示一段简单的内容，你也需要 <table><tr><td>这三个基本的标签，每个标签里面还要加上一堆乱七八糟的属性，不像<div>，既简单，又整洁，又时尚，它和 CSS 珠联璧合，琴瑟和谐，它们构成最完美的 Box 模型，他们象现实中的箱子，你把东西放进去，然后，很自由地对他们进行排列，厌烦了一种布局，没关系，简单地改动一下 CSS 定义，一种全新的布局便诞生了；不象 Table，Table 像食堂里的餐具柜，一排排，一列列，土里土气，油腻腻的，象我们的父辈，邋遢，什么都往家里拿，胡乱堆在角落里，如果 Div 是小资，Table 就是老三届，他们不属于这个时代。
也就是近几年的事，至多不过三五年，W3C是一个人人都认为重要但人人都不喜欢的组织，他们的官方网站十分丑陋，我敢说平生没见过这么丑陋的网站，但他们的网站是为数不多的可以通过全部W3C标准验证的网站，这意味着，他们的网站在语法上，在结构上，在可访问性上是完美的，虽然依旧十分丑陋。不过这是笑谈，W3C非常重要，否则微软会把全体 Web 开发工程师带到万劫不复的境地，还好，Netscape 死后，涅磐出 Firefox，而 Opera 在 Firefox 横空出世之后虽然没得到任何好处，至少得到了精神上的支持，看到没，终于有大哥出来收拾你。乔布斯复出后，苹果重返昔日的光芒，这时人们才知道世界上还有一个叫做 Safari 的浏览器，所有这一切加在一起，让 W3C 真正有了存在的必要。
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，你几乎能够实现任何复杂的版面。
这种布局风格在2000年代初，一直到中期仍然十分流行，尤其国内，在大为美的潜意识下，人们把所有能塞到一个页面的东西都塞进了首页，Table 就像一个旧时代的管家，把所有东西虽不能井井有序，但至少是一样不少地编排起来。然而这样的 Web 终于到了让人厌恶的地步，随着搜索，RSS 订阅，以及以博客为代表的个性化 Web 的出现，人们有更多渠道获得信息，而不必去访问那几个让人几乎要晕过去的门户的首页，于是出现了一种清新的，轻量的 Web 风，使用更简单的布局，更明快的配色，大图标，大 Banner，以及更容易阅读的大字体，同时，在这个时候，CSS 已经非常成熟，而 Firefox, Opera, Safari 为代表的浏览器，在遵守 W3C 标准方面要远远好过 IE，人们终于认识到 CSS 的威力。因为 CSS 在布局上，其核心是一个 Box
模型，人们必须为 CSS 找一个可以依附的容器对象。
Div 成为幸运者一方面因为它天生就是 Box 的最佳原型，在语义上，Div 代表页面的一个区域，在外形上，它四四方方，更重要的是，它不像 <P> 或 <a> 那样事先已经被赋予特殊的语义（虽然它们也能用于 Box 模型）；另一方面，则出于人们对 Table 统治一个臃肿时代的憎恶，一个时代的结束，继任者都会努力抹去旧时代的痕迹，那些旧时代的象征或代表的命运多半如此，人们并不是简单地忘却它们，而是断然划清界限。
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 支持的所有 CSS 属性，Table 全部支持，事实上，在 Div 大红大紫之前，那些 Div 的早期采用者曾信心不足地表示，Table 能做到，Div 都能，而他们也为自己的话付出了代价，企图在 Div 中实现垂直居中的人明白我的意思，企图在 IE6 中不经 CSS Hack 而实现 100% Div 布局的人更明白我的意思。100% Height 问题，几个 Div 之间的宽度自适应问题，相信任何从事 Div + CSS 设计的人会遇到。Table 在这方面的优势并不是因为它本身多么优秀，而是因为它老牌，没有浏览器敢忽视，也因为它的特性原本如此，人们发明表格，是因为希望数据显示得整齐，就这么简单。然而，为什么 Table 后来背上那么多的恶名？Div 拥护者对 Table 的责难不外乎以下几条。
代码臃肿：你至少需要写下 <table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table 的各种标签中还包含了复杂的属性定义，而 Div 只需 <div>一个标签。
页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。
不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。
可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。
不够语义（Semantic）：我们需要语义的 Web。
第1条：代码臃肿
首先，Table 里面唯一无法用 CSS 定义的属性只有 Cellspacing, Cellpadding 几个，其它属性都可以并且应当使用 CSS，这样，剩下的，就是<table><tr><td>和 <div> 的对决，我相信一个动辄几十K大小的网页，即使使用了几十个 Table，因此多出来的代码也可以忽略不计，那些埋怨 Table 代码臃肿的人其实该检查自己的编码习惯，能将 Table 写得十分臃肿的人，写 Div 相比也未必会简洁到哪里。
第2条：页面渲染性能问题
我使用一台2004年的笔记本电脑，1.6G 的 CPU 与 1G 内存，这种配置下，看不出 Table 布局和 Div 布局在页面渲染上有任何速度差别，其实这点差别即使有，相对网络本身的延迟也可以忽略。
第3条：不利于搜索引擎优化
如果你尽可能使用 CSS 而不是 Table 的属性，前面说了，产生的代码和 Div 的差别也不会很大，搜索引擎会歧视 <table> 标签吗，这种说法的依据我至今并没有找到。
第4条：可访问性差
这是 Table 固有的缺陷，不过多数 Div + CSS 的拥趸似乎并不是基于这个原因才排斥 Table。
第5条：不够语义
语义 Web 的含义要深远得多，并不是仅仅在 Table 和 Div 上纠缠，即使 W3C，也并没有规定 Table 只能用来显示表格数据，很多在 Table 的语义上进行纠缠的人，其实不妨再等等 HTML 5，那才是真正的语义。
本文的目的不是让你丢弃 Div 投身 Table，相反，如果 Div 能满足你的设计需要，Div 仍是首选，但没必要避讳 Table，否则会走入另外一个极端。很多使用 Div 无法简单实现的设计，仍可以使用 Table，当然，不管使用什么，都应该用 CSS 将内容与修饰分离。Div + CSS 和 Table + CSS 都是合法的设计，谁更简单就用谁。根据我的经验，当你能预见你的内容的格式，对你即将加入的内容有能力完全控制其显示格式时，应当使用 Div + CSS；当你即将加入的内容是不固定的，你无法预见其格式，如果不想让页面坍塌，使用 Table + CSS 是一种保险的做法。
没有啥不一样，都差不多，table+css适合做软件界面比较合适百分百，div+css个人觉得比较适合web网站开发
table+css 优点：不要考虑浏览器兼容
缺点：（1)代码太乱很难看懂 (2)不利于搜索引擎收录
div+css 优点：代码整洁清晰，有利于搜索引擎收录 ect ect...
缺点：需要考虑浏览器兼容问题
先谈div+css布局：
1、结构和样式分离，结构更清晰，方便修改维护。
2、容易被搜索引擎收录。
3、div+css是行业标准，是web发展的趋势。
4、缺点是学习起来比较困难，而且当前的浏览器不太兼容。
对于table+css布局：
1、div+css布局的优点都是table的缺点。
2、table+css布局比较简单，但是维护很困难。嵌入程序时也比不上div+css。
3、表格式的数据显示最好还是用table。（比如数据报表等）
4、在必要时还可以用表格。只要用的不是很多就行。（表格有自身的优点）
这是本人自己的一点见解。希望对你有用。
先说发展：
div+css是方向
div+css使得页面布局方便操作灵活，好的模型基本只修改css就实现页面重新布局了，页面效果丰富，这里的效果包括视觉效果和用户体验比如拖拉。
但是浏览器兼容困难，需要把不同浏览器样式都考虑进去。尤其Firefox。。Opera。。。
table+css是传统，就是一直延续下来的，页面视觉效果也能做，但是css比较复杂，写好了也挺好看的，但是不灵活，排版改变难度大，用户体验也有，用了很多js，好像有个相关的网站关于table的，我去找找，你记得管我要需要的话。
如果要是table套table再套table，那还是用div吧，好几层table，tr再多的话写的时候就会眼花缭乱。
Table 是如此丑陋，臃肿，哪怕只显示一段简单的内容，你也需要 <table><tr><td>这三个基本的标签，每个标签里面还要加上一堆乱七八糟的属性，不像<div>，既简单，又整洁，又时尚，它和 CSS 珠联璧合，琴瑟和谐，它们构成最完美的 Box 模型，他们象现实中的箱子，你把东西放进去，然后，很自由地对他们进行排列，厌烦了一种布局，没关系，简单地改动一下 CSS 定义，一种全新的布局便诞生了；不象 Table，Table 像食堂里的餐具柜，一排排，一列列，土里土气，油腻腻的，象我们的父辈，邋遢，什么都往家里拿，胡乱堆在角落里，如果 Div 是小资，Table 就是老三届，他们不属于这个时代。
也就是近几年的事，至多不过三五年，W3C是一个人人都认为重要但人人都不喜欢的组织，他们的官方网站十分丑陋，我敢说平生没见过这么丑陋的网站，但他们的网站是为数不多的可以通过全部W3C标准验证的网站，这意味着，他们的网站在语法上，在结构上，在可访问性上是完美的，虽然依旧十分丑陋。不过这是笑谈，W3C非常重要，否则微软会把全体 Web 开发工程师带到万劫不复的境地，还好，Netscape 死后，涅磐出 Firefox，而 Opera 在 Firefox 横空出世之后虽然没得到任何好处，至少得到了精神上的支持，看到没，终于有大哥出来收拾你。乔布斯复出后，苹果重返昔日的光芒，这时人们才知道世界上还有一个叫做 Safari 的浏览器，所有这一切加在一起，让 W3C 真正有了存在的必要。
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，你几乎能够实现任何复杂的版面。
这种布局风格在2000年代初，一直到中期仍然十分流行，尤其国内，在大为美的潜意识下，人们把所有能塞到一个页面的东西都塞进了首页，Table 就像一个旧时代的管家，把所有东西虽不能井井有序，但至少是一样不少地编排起来。然而这样的 Web 终于到了让人厌恶的地步，随着搜索，RSS 订阅，以及以博客为代表的个性化 Web 的出现，人们有更多渠道获得信息，而不必去访问那几个让人几乎要晕过去的门户的首页，于是出现了一种清新的，轻量的 Web 风，使用更简单的布局，更明快的配色，大图标，大 Banner，以及更容易阅读的大字体，同时，在这个时候，CSS 已经非常成熟，而 Firefox, Opera, Safari 为代表的浏览器，在遵守 W3C 标准方面要远远好过 IE，人们终于认识到 CSS 的威力。因为 CSS 在布局上，其核心是一个 Box
模型，人们必须为 CSS 找一个可以依附的容器对象。
Div 成为幸运者一方面因为它天生就是 Box 的最佳原型，在语义上，Div 代表页面的一个区域，在外形上，它四四方方，更重要的是，它不像 <P> 或 <a> 那样事先已经被赋予特殊的语义（虽然它们也能用于 Box 模型）；另一方面，则出于人们对 Table 统治一个臃肿时代的憎恶，一个时代的结束，继任者都会努力抹去旧时代的痕迹，那些旧时代的象征或代表的命运多半如此，人们并不是简单地忘却它们，而是断然划清界限。
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 支持的所有 CSS 属性，Table 全部支持，事实上，在 Div 大红大紫之前，那些 Div 的早期采用者曾信心不足地表示，Table 能做到，Div 都能，而他们也为自己的话付出了代价，企图在 Div 中实现垂直居中的人明白我的意思，企图在 IE6 中不经 CSS Hack 而实现 100% Div 布局的人更明白我的意思。100% Height 问题，几个 Div 之间的宽度自适应问题，相信任何从事 Div + CSS 设计的人会遇到。Table 在这方面的优势并不是因为它本身多么优秀，而是因为它老牌，没有浏览器敢忽视，也因为它的特性原本如此，人们发明表格，是因为希望数据显示得整齐，就这么简单。然而，为什么 Table 后来背上那么多的恶名？Div 拥护者对 Table 的责难不外乎以下几条。
代码臃肿：你至少需要写下 <table><tr><td>这三个标签之后，才能开始真正的内容，另外，Table 的各种标签中还包含了复杂的属性定义，而 Div 只需 <div>一个标签。
页面渲染性能问题：浏览器需要将整个表格完全读完后才会开始渲染。
不利于搜索引擎优化：搜索引擎喜欢内容与修饰分开。
可访问性差：屏幕朗读软件和盲文浏览器无法很好地理解 Table 中的内容。
不够语义（Semantic）：我们需要语义的 Web。
第1条：代码臃肿
首先，Table 里面唯一无法用 CSS 定义的属性只有 Cellspacing, Cellpadding 几个，其它属性都可以并且应当使用 CSS，这样，剩下的，就是<table><tr><td>和 <div> 的对决，我相信一个动辄几十K大小的网页，即使使用了几十个 Table，因此多出来的代码也可以忽略不计，那些埋怨 Table 代码臃肿的人其实该检查自己的编码习惯，能将 Table 写得十分臃肿的人，写 Div 相比也未必会简洁到哪里。
第2条：页面渲染性能问题
我使用一台2004年的笔记本电脑，1.6G 的 CPU 与 1G 内存，这种配置下，看不出 Table 布局和 Div 布局在页面渲染上有任何速度差别，其实这点差别即使有，相对网络本身的延迟也可以忽略。
第3条：不利于搜索引擎优化
如果你尽可能使用 CSS 而不是 Table 的属性，前面说了，产生的代码和 Div 的差别也不会很大，搜索引擎会歧视 <table> 标签吗，这种说法的依据我至今并没有找到。
第4条：可访问性差
这是 Table 固有的缺陷，不过多数 Div + CSS 的拥趸似乎并不是基于这个原因才排斥 Table。
第5条：不够语义
语义 Web 的含义要深远得多，并不是仅仅在 Table 和 Div 上纠缠，即使 W3C，也并没有规定 Table 只能用来显示表格数据，很多在 Table 的语义上进行纠缠的人，其实不妨再等等 HTML 5，那才是真正的语义。
本文的目的不是让你丢弃 Div 投身 Table，相反，如果 Div 能满足你的设计需要，Div 仍是首选，但没必要避讳 Table，否则会走入另外一个极端。很多使用 Div 无法简单实现的设计，仍可以使用 Table，当然，不管使用什么，都应该用 CSS 将内容与修饰分离。Div + CSS 和 Table + CSS 都是合法的设计，谁更简单就用谁。根据我的经验，当你能预见你的内容的格式，对你即将加入的内容有能力完全控制其显示格式时，应当使用 Div + CSS；当你即将加入的内容是不固定的，你无法预见其格式，如果不想让页面坍塌，使用 Table + CSS 是一种保险的做法。
没有啥不一样，都差不多，table+css适合做软件界面比较合适百分百，div+css个人觉得比较适合web网站开发
table+css 优点：不要考虑浏览器兼容
缺点：（1)代码太乱很难看懂 (2)不利于搜索引擎收录
div+css 优点：代码整洁清晰，有利于搜索引擎收录 ect ect...
缺点：需要考虑浏览器兼容问题
先谈div+css布局：
1、结构和样式分离，结构更清晰，方便修改维护。
2、容易被搜索引擎收录。
3、div+css是行业标准，是web发展的趋势。
4、缺点是学习起来比较困难，而且当前的浏览器不太兼容。
对于table+css布局：
1、div+css布局的优点都是table的缺点。
2、table+css布局比较简单，但是维护很困难。嵌入程序时也比不上div+css。
3、表格式的数据显示最好还是用table。（比如数据报表等）
4、在必要时还可以用表格。只要用的不是很多就行。（表格有自身的优点）
这是本人自己的一点见解。希望对你有用。
先说发展：
div+css是方向
div+css使得页面布局方便操作灵活，好的模型基本只修改css就实现页面重新布局了，页面效果丰富，这里的效果包括视觉效果和用户体验比如拖拉。
但是浏览器兼容困难，需要把不同浏览器样式都考虑进去。尤其Firefox。。Opera。。。
table+css是传统，就是一直延续下来的，页面视觉效果也能做，但是css比较复杂，写好了也挺好看的，但是不灵活，排版改变难度大，用户体验也有，用了很多js，好像有个相关的网站关于table的，我去找找，你记得管我要需要的话。
如果要是table套table再套table，那还是用div吧，好几层table，tr再多的话写的时候就会眼花缭乱。
总体来说综合着用吧，先看需求。当然，我还喜欢看心情。嘻嘻
div+css 优点在于 可以比table节省代码 如果你要修改样式 改一句css div里面所有的都会跟这变 缺点就是 相对于table复杂 tabel 优点在于 可以直接生成 缺点就是tr td 太多了 网络传输 需要精和小 而且样式修改起来复杂
frameset一般用于系统或者后台网页中，还有一种是iframe布局；table布局的话一般比较适合网页要跟屏幕大小一致的时候用到，就是说满屏的网页，不管你怎么变窗口，他还是满屏，这个时候table会比较方便好用；现在div完全可以取代table了，整体布局用div，方便后期的维护。只是有些方面div会相对烦琐一点，CSS要写的比较多，比如表格那些，这些一般还是会用回表格！总得来说，现在网页一般是div+CSS来完成的，这样改版啊写程序方便！
DIV比表格容易做到数据和样式分离
用TABLE也能做到样式和数据分离啊,每个元素都能做到样式和数据分离啊,CSS不会只为DIV服务吧. 呵
DIV主要用来给网站布局，定位，而表格主要是用来承载数据的，一般不用来布局，DIV布局比较灵活，比如说可以用float属性把整个页面的布局改变，而table却不灵活，所以该用哪个应视情况而定，也不一定说table就没有DIV好，希望对你有帮助。 1，table语意是表格，表格是做什么的，是什么形态，大家多想想吧。 2，div可以做任何复杂度页面，越复杂相对table优势越大。 3，很多人只很肤浅的理解使用div，但没理解为什么使用，div的作用和优势不清楚 4，div布局页面是可以看成是三维的，tabel只是二维平面。语意上理解，层可以重叠，表格却比较牵强，当然技术上也可以层叠起来。 5，垂直居中是div不足，但可以有N中变通的办法。因为w3在考虑的时候，认为布局时，垂直居中没有意义，事实上即使需要垂直居中“布局”也是非常特殊的场合。简单的数据显示垂直居中使用table 即可。 6，div做布局的优势在于所有控制他的CSS元素都能代替table属性的功能，并且能全部写入样式，更重要的是写入样式后，不管对代码简洁还是执行效率都有绝对优势。 7，考验技术的时候大家可以尝试全部使用div写页面，不过实际应用中几乎都要使用tale才能完美表现。 8，xhtml结构页面只能实现“结构和表现”分离，而不是“数据和表现”，这里的结构内是含有数据的。我个人的理解只有当“xml+xsl+css”，才能是完美的“数据+结构+表现” <table class="Header"> <tr> <td> </td> </tr> </table> <div id="Header"></div> 自己看 如果还有数据行的话。 那TABLE的代码不知道多哪去了。 垂直居中：line-height:XXXpx; vertical-align:mildde;:nugget:
扫一扫
1260
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
