表格是否被 DIV 取代？ [复制]答案

【问题标题】：Are tables replaced by DIVs? [duplicate]表格是否被 DIV 取代？ [复制]
【发布时间】：2010-11-20 14:11:08
【问题描述】：

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

我知道现在每个人都在关注 DIV 和 css 并且反对表格，我一直使用表格，因为它们很容易让我在构建时直观地看到我在做什么，我现在才刚刚进入 DIV 世界。

所以我的问题是表格完全被 div 所取代？我注意到stackoverflow的来源主要是DIV，但仍然使用表格，所以我猜有时必须使用表格？

下面是我正在尝试完成的某件事的图像，其中大部分是编码的，但其中一些是在 photoshop 中添加的，到目前为止，我已经在 div 中完成了这一切，但我所拥有的只是背景单元格一个列表项和照片，我的代码中缺少的是所有文本区域，我可以非常容易地将文本区域定位在表格单元格中，但是因为像 80% 的对象仅使用 css 和div 我不确定我是否应该尝试仅使用 div 来完成它，或者评论 div 中的表格是否是可行的方法。

我在此页面上注意到分析器是 DIV 内的表格 alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png

【问题讨论】：

你可能会觉得这篇文章很有趣：smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell
看到这个问题。 stackoverflow.com/questions/83073/…
我已经用照片和我想要做的描述更新了我的帖子，我不确定是否应该使用表格或 100% div/css
使用 CSS 是控制页面显示和外观的正确方法，但不应仅将 div 用于设计目的。我见过包含数千个嵌套 div 的页面，这些页面与具有数千个嵌套表的页面一样难以维护。应该使用 Div 对一起出现的内容进行分组。（注意：我使用动词should，因为如果语义正确的方式很难或不可能实现，我也犯了违反这些规则的罪行）
我能够只用 css 完成我的项目，所以我很高兴，这也不是太难，我认为这比走桌子路线更好

标签： html css html-table

【解决方案1】：

您应该检查Elastic CSS Framework，您可以非常轻松地布局无限的列组合并使用其助手定位它们，请查看文档。

干杯

【讨论】：

【解决方案2】：

我在 meta-SO 上发布了他们的表格：https://meta.stackexchange.com/questions/3110/when-did-so-start-using-tables-for-layout/3547#3547

简而言之，我认为这很好，因为它是表格数据。

【讨论】：

表格描述的结构与数据位之间的任何表格关系不匹配。他们使用布局表，这不好。
怎么不是表格数据？如上述帖子所述，表格数据为 votes|answer。为什么那不是表格数据？

【解决方案3】：

在性能方面，表只会在到达结束标记 () 时才会被渲染，所以如果它是一个包含 100 行的表，你会在稍后看到该表出现在浏览器中。这不适用于 DIV。

【讨论】：

我认为这只适用于 Internet Explorer。

【解决方案4】：

我想很多人会争辩说，“表格”数据，或者最能以行和列表示的数据，应该保存在表格中，但发明 div 是为了将表格替换为大型布局元素。在我个人看来，表格总是以超出其预期目的的方式用作布局元素。这并不是说人们仍然不会滥用 div，例如

<div align="center">To replace a <center> tag</div>

我想说看看 A List Apart，特别是 Their section on layout，了解如何使用现代兼容的基于 css 的设计。

edit ：我的意思是这是对 div 标签的错误使用。在此示例中，您将使用诸如“text-align:center”之类的样式或将该样式应用于标签本身，但在这种情况下，没有理由将您的文本包装在块级元素中，因为默认情况下是文本是内联的，所以你最好用这样的东西......

<p class="center">This is a centered paragraph</p>

然后在你的样式表中

.center { text-align:center; }

因此，以下内容：

<div>Monday | Tuesday | Wednesday | Thursday | Friday</div>
<div>Work | Work | Work | Work | Play</div>

可能是合规的，但看起来很糟糕，你最好这样做：

<table>
<th>
  <td>Monday</td><td>Tuesday</td><td>Wednesday</td><td>Thursday</td><td>Friday</td>
</th>
<tr>
  <td>Work</td><td>Work</td><td>Work</td><td>Work</td><td>Play</td>
</tr>
</table>

【讨论】：

【解决方案5】：

对于这种语义内容的概念有很多狂热的狂热，这很好，但唯一的问题是它太天真了。

事实：有些事情可以简单用“纯” CSS 中无法完成的表格完成，在“纯” CSS 中非常困难CSS，在“纯” CSS 中有一些令人讨厌的副作用或存在严重的跨浏览器问题。

我完成了我的 CSS3 Wish List，在编译该列表时，我意识到自十年前的 HTML 3.2 以来我已经能够用表格做一些事情，我仍然可以'与 div 无关。

我完全赞成有语义布局。不错的理想。但在它能够完成它试图替换的所有事情之前，它试图替换的东西将具有有效的用例。

【讨论】：

尝试为一部歌剧制作意大利/英语并排的歌词怎么样？这不是真正的“表格数据”，从语义上讲，最好将意大利语文本显示为一组，将英文文本显示为另一组，但是使用每行诗句或描述性文本的每个区域都有一行的表格会即使有些诗行足够长，也可以把事情排好。如果文本换行，我见过的不使用这种方法的脚本通常会错位。

【解决方案6】：

我的建议是真正学习 HTML。使用与内容实际相关的元素。如果是项目列表，请使用列表标签之一。如果是数据输入，请使用 fieldset 标签。没有那么多标签可供选择，但有很多标签被忽略了。如果你只是简单地用 DIV 替换所有表格布局格式，你的标签汤可能会不那么厚实，但你仍然会窒息。

【讨论】：

【解决方案7】：

为了在语义上正确，表格应该只用于表格数据，而不是用于布局页面。

David Dorward 在评论中引起了我的注意。根据HTML 4.01 Specification Tables in HTML Documents上的部分：

表格不应纯粹用作布局文档内容的一种方式，因为这可能会在呈现到非可视媒体时出现问题。此外，当与图形一起使用时，这些表格可能会迫使用户水平滚动以查看在具有更大显示器的系统上设计的表格。为了尽量减少这些问题，作者应该使用style sheets 来控制布局而不是表格。

【讨论】：

“表格不应纯粹用作布局文档内容的手段” - HTML 4.01：w3.org/TR/html4/struct/tables.html#h-11.1
Like 此页面上的答案是否会被视为表格数据？
我不这么认为。正如我在回答中所说，如果您不使用 Excel，它不应该在表格中：stackoverflow.com/questions/1293698/are-tables-replaced-by-divs/…
大卫 - 感谢您的链接。我会添加它。我不知道它在官方 HTML 文档中。
答案本身不会是表格数据。您可以表示每个答案、它的投票数、添加时间以及将其添加为表格数据的用户 - 但它们更有用地表示为带有标题的部分（SO 不这样做，哼哼） .

【解决方案8】：

这当然取决于。您必须记住的黄金法则是用于描述内容和流程的 XHTML/HTML 文档文件。

所有的设计都应该使用 CSS 文件进行控制（只要可能，在某些情况下我们肯定无法控制它，比如 CMS 出现在游戏中）。

现在，我们如何才能达到最符合语义和最实用的结果？与所有事情一样，这取决于。使用 XHTML/HTML 标记元素而不是仅仅依靠正确的内容显示，这是推荐的方式。

请注意，我说的是标签元素。 DIV 只是其中之一，但只要存在 a 或 / 标签就替换为是不够的。事实上，这会让你摆脱“divitis”（对所有事情都使用 div 的无用！），并且会让你的工作变得艰难。尝试检查大多数标签并在看起来正确时使用它们。

有时，什么是内容或其他标签是一个非常主观的问题。就在这个问题中，有人问此内容是否会被视为表格数据（表格应该用于的数据），但我认为您必须订购和过滤的任何内容（您可以在 Excel 上复制和粘贴而无需担心）这是有价值的材料。

除此之外，它通常只是一些有趣的布局显示，应该使用 CSS 和其他标签来处理。

有些人会说工作量太大，不值得。我不同意。虽然学习如何使用 CSS/divs 细微差别一开始会有些不同，但您很快就会了解它的转折点。

祝你好运，记住我们总是在学习新东西，所以不要担心任何问题。

【讨论】：

我已经用我正在尝试制作的东西的照片更新了我上面的问题，你认为它适合 div 内的桌子吗？
似乎图像没有正确通过：P
我认为设计非常适合使用定义列表结构。查找
、
和

标签。表格也可以，但我会尽量不使用它们。如有疑问，请务必四处询问。

【解决方案9】：

CSS 非常棒，但我主要将它用于样式，而不是布局。我和无数其他开发人员仍然每天都在使用表格来构建网页，并且在可预见的未来也会如此。

如果你想在布局中使用绝对和相对定位，那就去吧。如果不是，那么你不这样做并不邪恶或愚蠢。使用表格时要注意的主要事项是防止表格嵌套地狱 IMO。

【讨论】：

请记住，使用表格进行布局的“无数其他开发人员”这样做主要是因为他们没有时间或根本不想学习使用 div 和其他语义 CSS 进行布局标签。这确实需要更多的思考，但使用 CSS 确实有好处，比如更好的下载和渲染速度。不，如果你不使用 CSS 布局，你就不是邪恶或愚蠢——只是效率较低。
表格不应该用于布局。它们破坏了可访问性，并且是一个可以进行更改的 PITA。除了纯粹的懒惰之外，没有任何理由不使用 div 和 CSS 进行布局。
啊，是的，懒惰的说法。噗。
如果您使用表格进行布局，您没有可预见的未来。顺便说一句，也很少需要使用绝对和相对定位进行布局。你应该在解雇它之前学习如何做这些事情。
我从未拒绝过它。 “桌子是魔鬼”的狂热很有趣，仅此而已。给猫剥皮的方法不止一种。说人们懒惰，或者因为他们使用桌子而暗示他们不会很快找到工作是愚蠢的。

【解决方案10】：

大多数网站都使用 div 代替表格。但是在某些情况下，您可以在跨浏览器的方式使用 div 进行设计很复杂的情况下使用表格。

例如 垂直对齐 与表格单元格中的内容相比，div 中的内容将是一个大问题。

您还可以在此页面中找到正在使用的表格标签。

只有在处理完所有单元格后，表格才会呈现到屏幕上。

还请查看以下问题。

Why not use tables for layout in HTML?

DIV’s vs Tables or CSS vs. Being Stupid

Yet Another Divs vs Tables Question: Forms

【讨论】：

不要仅仅因为没有桌子的教条而拒绝投票。 CSS 仍然对创建某些类型的布局的支持很弱。我自己也在使用 DIV，但我认为在某些情况下不使用它们会很沮丧。垂直对齐示例就是其中之一。

【解决方案11】：

用于描述表格数据结构的表格并未被替换。

用于描述演示的表格已被替换，但没有被 div 替换。它们已被样式表取代，样式表与最能描述内容语义的任何元素相关联。一个 div 没有与之关联的语义，所以如果没有更好的就使用它。

【讨论】：

【解决方案12】：

表格只能用于表格数据。为了弄清楚我正在处理的是否是表格，我问自己“如果是的话，我会把它放在 Excel 或 Word 中吗？”

Bill Merikallio 和 Adam Pratt 写了一篇有趣且内容丰富的文章 Why tables for layout is stupid。他们还详细说明了应该在何处使用表格以及何时使用。

【讨论】：

我之所以询问此页面上的答案是否适合表格，是因为在此页面的源代码中，他们在答案 div 中使用了一些表格
同意，关于 MetaSO 上的这个话题有很好的讨论：meta.stackexchange.com/questions/3110/…

【解决方案13】：

就像 Korey 和 Thomas 所说，最好用表格来表示表格数据。

如果你想用纯 CSS 做网站布局，你可以看看这些 CSS 框架，它们可以轻松完成任务：

这些有很多 css 框架，只要找到适合你需要的一个就行了..

更新：这是more complete list of css frameworks。

【讨论】：

【解决方案14】：

表格适用于表格数据，但 div + CSS 更适合一般页面布局。

http://css-discuss.incutio.com/?page=TablesVsDivs 有很多很好的理由，也有一些反驳的理由。

【讨论】：