Question

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

我知道现在每个人都是关于DIV和css以及对阵桌子，我总是使用桌子，因为它们很容易让我在视觉上看到我在建造时正在做什么，我现在正在进入DIV世界。

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

下面是我想要完成的事情的图像，其中大部分是编码但是其中一些是在photoshop中添加的，到目前为止，我已经完成了所有在div中完成但是我所拥有的只是背景单元格列表项和照片，我在代码中缺少的是所有文本区域，我可以很容易地将文本区域放在表格单元格中，但是因为80％的对象只用css完成divs我不确定我是否应该只尝试使用div的finsih或者如果注释div中的表格是要走的路。

我在这个页面上注意到，ansers是DIV中的一个表 alt text http://img2.pict.com/e0/4e/de/1486585/0/screenshot2b15.png

Answer 1

为了在语义上正确，表格应仅用于表格数据而不用于布置页面。

David Dorward在评论中引起了我的注意。根据{{3}}上的HTML 4.01 Specification部分：

表格不应仅仅用作布局文档内容的方法，因为在呈现给非可视媒体时可能会出现问题。此外，当与图形一起使用时，这些表可能会强制用户水平滚动以查看在具有更大显示的系统上设计的表。为了最大限度地减少这些问题，作者应使用Tables in HTML Documents来控制布局而不是表格。

Answer 2

关于语义内容的概念，有很多热切的狂热，这很好，但唯一的问题就是它绝对是天真的。

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

我做了我的CSS3 Wish List并且在编译该列表时，我意识到自从十年前的HTML 3.2以来我已经能够用表做的一些事情我仍然不能用div。

我全都有语义布局。不错的理想。但是，直到它可以做任何它试图替换的东西，那么它试图替换的东西将具有有效的用例。

Answer 3

在大多数网站中使用div而不是表格。但是在某些情况下你可以使用表格，其中使用div的设计会以交叉浏览器的方式变得复杂。

例如，与表格单元格中的内容相比，div中的 vetical aligning 内容将是一个大问题。

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

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

还要看看以下问题。

Why not use tables for layout in HTML?

DIV’s vs Tables or CSS vs. Being Stupid

Yet Another Divs vs Tables Question: Forms

Answer 4

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

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

我想看一下A List Apart，特别是Their section on layout，了解如何使用符合现代标准的基于CSS的设计。

编辑：我的观点是，这是对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>

Answer 5

表适用于表格数据，但divs + CSS是首选页面布局的首选。

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

Answer 6

像Korey和Thomas说的那样，最好用表来表示表格数据。

如果你想在纯CSS中进行网站布局，你可以看看这些CSS框架，这可以简化任务：

这些有很多css框架，只需找到符合你需求的那个......

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

Answer 7

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

比尔梅里卡利奥＆amp; Adam Pratt撰写了一篇有趣且内容丰富的文章Why tables for layout is stupid。它们还详细说明了表应该的使用位置以及何时使用。

Answer 8

表格作为描述表格数据结构的手段尚未被替换。

表格作为描述演示文稿的方法已被替换，但不包括div。它们已被样式表替换，并与最能描述内容语义的元素相关联。 div没有与之关联的语义，所以如果没有更好的话，就会使用它。

Answer 9

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

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

现在，我们如何才能达到最具语义和实用性的结果？与一切一样，这取决于。使用XHTML / HTML标记元素代替依赖于正确的内容显示，这是推荐的方式。

请注意，我已经说过标签元素了。 DIV只是其中之一，但只要替换为或/ tags存在就不够了。事实上，这将推动你超越“divitis”（对所有事情毫无用处的div！）并且会让你的工作变得艰难。尝试检查大多数标签，并在看似正确时使用它们。

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

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

有些人会说它太多了，不值得。我不同意。虽然学习如何使用CSS / div的细微差别一开始有点不同，但你很快就会了解它的变化。

祝你好运并记得我们一直在学习新东西，所以不要担心一切。

Answer 10

我的建议是真正学习HTML。使用实际与内容相关的元素。如果是项目列表，请使用其中一个列表标记。如果是数据输入，请使用fieldset标记。没有那么多标签可供选择，但却忽略了许多标签。如果您只是用DIV替换所有的表格布局格式，那么您的标签汤可能会稍微不那么厚实，但您仍然可以呛到它。

Answer 11

您应该检查Elastic CSS Framework您可以非常轻松地布置无限的列组合，并将其与帮助者放在一起，查看文档。

欢呼声

Answer 12

就性能方面而言，只有在达到结束标记（）时才会呈现表格，因此如果表格包含100行，您将看到该表格稍后会出现在浏览器中。对于DIV来说，情况并非如此。

Answer 13

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

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

Answer 14

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

如果要对布局使用绝对和相对定位，请选择它。如果没有，你就不会因为不这样做而变得邪恶或愚蠢。使用表时要注意的主要事情是防止表嵌套地狱IMO。

桌子是否被DIV取代？

14 个答案: