在当前的浏览器中,使用 table 而不是 div 标签并没有真正的性能原因。
很长一段时间以来,HTML 表格明显快于 div+css 表格,特别是在 IE6 中具有更大的表格和大量浮动 div 标签。这并不是说几个浮动 div 很明显,通常页面有数百个浮动 div 才容易注意到差异,但很明显。事实上,我记得我经常使用的一页,他们从表格切换到浮动 div 的那一天非常明显。当然,这是我经常访问的页面(所以我确切地知道加载需要多长时间)并且列出了所有网络安全颜色及其值(因此有很多浮动 div)。当时,这是因为表格有自定义代码,它比等效的 div 标签运行得更快(并且更容易跟踪)。浮动 div 标记完全实施后,差异不再明显(表格因新的 CSS 实施而变慢)。
话虽如此,使用表格而不是 div+css 是有原因的。
- 我不认为 W3C 标准打算用 div+css 替换表格。这样做违背了他们的标准通常提倡的结构与风格的分离。此外,HTML5 引入了新的标签来替换常用的 div+css,如"article", "aside", "footer", etc。如果 div+css 是要走的路,为什么立场的作者会不鼓励使用它?
- 选择时表格更容易预测。您是否曾经开始在表格中选择一些文本,只是为了看到第一列被选中,并且在能够选择第二列之前选择了表格下的所有内容?我有,它确实是错误(注意:我在过去几个月没有检查过这个,但我认为这仍然是一个写得不好的网站的问题)。
- 非浏览器更容易识别表格。例如,复制/粘贴到 Excel 中。表格总是正确复制,但 div+css 通常与 A 列中的每个单元格一起出现,或者有时将整个表格放在一个单元格中。
- 表格的作用通常与 div+css 标签相同,但预定义的样式更多,因此 CSS 更简单。
我并不是说在特定情况下是对还是错。
我会说最好为工作使用最合适的标签。
有人指出
W3C HTML5 标准清楚明确地规定表格只能用于表格数据。
这当然是不正确的,但这只是因为使用了“仅”这个词。来自@Isaac Fife 状态的link
作者不得将元素、属性或属性值用于其适当的预期语义目的以外的目的,因为这样做会妨碍软件正确处理页面。例如,尽管在语法上是正确的,但以下文档是不符合标准的:[HTML for a page contains a table contains a table by two rows with a cell.]...因为放置在单元格中的数据显然不是表格数据。 ..” 参考为什么 table 标签的特定使用是错误的
虽然这不是最终规则,但它是一个很好的例子,说明标签使用不当会成为问题。
可以在W3.org page for Tables (HTML4) 上找到更明确的答案:
HTML 表格模型允许作者将数据(文本、预格式化文本、图像、链接、表单、表单域、其他表格等)排列到单元格的行和列中。
...
表格不应纯粹用作布局文档内容的一种方式,因为这可能会在呈现到非可视媒体时出现问题。此外,当与图形一起使用时,这些表格可能会迫使用户水平滚动以查看在具有更大显示器的系统上设计的表格。为了尽量减少这些问题,作者应该使用样式表而不是表格来控制布局。
对于那些想要更多(尽管尚未最终确定)的人,W3.org page for Tabular data (HTML5) 它声明(注意:在撰写本文时 HTML5 尚未标准化,这就是为什么它们是页面底部的红色框.):
表格元素以表格的形式表示具有多个维度的数据。
...
不应将表格用作布局辅助工具。从历史上看,许多 Web 作者使用 HTML 格式的表格来控制他们的页面布局,这使得从此类文档中提取表格数据变得困难。特别是,辅助工具(如屏幕阅读器)的用户可能会发现使用用于布局的表格导航页面非常困难。如果要将表格用于布局,则必须使用属性 role="presentation" 标记,以便用户代理正确地将表格表示为辅助技术,并将作者的意图正确传达给希望提取表格的工具文档中的数据。
注意:使用 HTML 表格进行布局有多种替代方案,主要使用 CSS 定位和 CSS 表格模型。
由此可见,标准编写者希望阻止使用表格进行页面布局。话虽如此,他们并没有说严格禁止使用表格进行页面布局,因为角色属性可用于指示表格正在填充“演示”角色。
从标准看来,最好的做法是使用表格来呈现表格数据,而不是用于布局。关于何时使用表格的一个相当好的经验法则可以在about.com找到。
注意:请记住,表格标签确实代表页面上信息的结构或布局。这些标准并没有试图完全取消表格的使用,而是不鼓励使用表格来格式化页面。可以将您从数据库中提取的信息放入表格中,但不要在表格中构建页面,其中顶部标题位于一行,左侧选项栏和主页内容位于第二行的两个单元格中,并且底行的页脚。
正确使用表的示例可能是ASCII look up chart 或a web safe color chart。
不当表使用示例可在w3schools.com
找到
2012/03/12 更新:添加了附加信息和有效的标准参考,以阐明何时使用表格。