基于表格的布局与基于 Div 的布局答案

【问题标题】：Table-Based Layout vs Div-Based Layout [duplicate]基于表格的布局与基于 Div 的布局
【发布时间】：2011-06-26 19:46:25
【问题描述】：

可能重复：
Why not use tables for layout in HTML?

我只是想知道基于表格的布局和基于div的布局之间的区别。我什么时候应该使用什么以及为什么？

提前致谢。

【问题讨论】：

标签： html css

【解决方案1】：

表格只能用于表格数据。真的就这么简单。

至于为什么；网站布局不是表格数据。

此外，表格将在您的页面中使用更多代码。例如;要创建一个“盒子”，您可以这样做：

<table>
  <tr>
    <td>Box Content</td>
  </tr>
</table>

或者这个

<div>
  Box Content
</div>

【讨论】：

作为一个小补充，必须承认有table-for-layout 可以做一些divs+CSS 通常做不到的事情。这些通常仍然可以通过 CSS 显示属性的 table-* 值来实现。但是浏览器支持的问题开始发挥作用。
好点。此外，正如另一个答案中所指出的，它们或多或少对于跨客户端电子邮件模板设计至关重要。
@ScottBrown 感谢您的回答。但是，我有一个问题。 Google 基本 HTML 视图适用于连接速度较慢的用户。但是，他们使用表格数据拆分布局。其他一些提到 DIV 引擎的答案/文章比 TABLE 引擎快。但是，Google 使用大量表格数据的基本 HTML 视图布局。那么，如何为慢速连接用户更好地加载呢？我可以知道原因吗？
@KaruppiahRK 表不能更快，如果有更多标记要传输。我的猜测（这只是一个猜测）是他们通过使用表而不是慢速连接来满足旧版浏览器的需求。相反，它们将通过在基本视图中包含较少的功能来满足较慢的连接。

【解决方案2】：

非常简单，基于表格的布局是组织内容位置的旧方式，而 div 是新方式。将它们视为不可见的矩形（除非您选择使其可见），它们包含内容，并且在您如何定位它们方面各有利弊。

您几乎可以将 div 定位到表格可以定位到的所有情况中，而您可以使用 div 进行很多定位，而您无法使用表格进行定位。这是不鼓励使用表格来布局页面的原因之一。

桌子并没有完全消失。他们仍然非常擅长（有趣的是）基于表格的信息或统计显示。想想 excel 类型的布局。

【讨论】：

【解决方案3】：

不幸的是，当您创建用于电子邮件表格的 HTML 时，仍然是强制性的：许多邮件客户端使用仍然认为是 1998 年的 HTML 呈现引擎。Microsoft Outlook 就是一个显着的例子。

【讨论】：

【解决方案4】：

使用 div，您可以使用绝对位置。因此，您可以在网页中的任何位置放置数千个 div。你也可以用 z-index 将 div 放在其他 div 之上，这对于 table 来说更难。

表格看起来不太灵活，但让您看起来更有条理，并且浏览器之间的兼容性也更好。

我的建议。用表格制作你的主要结构并将其放入你的 div。

【讨论】：

【解决方案5】：

表格从来都不是一般的结构标签。从理论上讲，您是在告诉浏览器您正在提供表格数据，这可以以浏览器选择的任何方式进行解释。一个 div（或 span）标签没有任何语义含义，仅表示文档的一部分。

理论上，表格也比 div 与 css 组合更受限制。使用 css 你可以让你的元素做几乎任何事情。这也提供了仅通过切换 css 来动态重构页面的可能性。您可以允许用户在不影响 html 的情况下定义自己的样式和布局。

您可能仍需要在电子邮件中使用表格，我不知道。就我个人而言，我从不乐意在我的电子邮件中收到 html，但如今这似乎是不可避免的。

【讨论】：