用桌子代替 DIV

我相信只是表格内容。例如，如果你打印出一个数据库表格或电子表格式的数据到 HTML。

我通常会选择显示表单类型信息的表(名、姓、地址等) ，其中跨多行排列标签和字段非常重要。我用于布局的 DIV。

当然，该表包装在一个 DIV:)中

When the data I am presenting is, indeed, tabular.

我发现一些网页设计师在一些网站的表格数据上使用 div 是很荒谬的。

另一种用法是使用表单，特别是标签: 文本框对。从技术上讲，这可以在 div 框中完成，但是在表中更容易做到这一点，而且可以认为 label: 文本框对实际上是表格化的。

通常当您不使用表来提供布局时。

表-> 资料

Divs-> 布局

(主要)

如果您希望拥有语义正确的 HTML，那么您应该只对表格数据使用表格。

否则，您可以使用表来满足所有需要，但是可能有一种方法可以使用 div和 CSS 来完成同样的工作。

表是为表格内容而设计的，而不是为布局而设计的。

So, don't ever feel bad if you use them to display data.

1)用于显示表格数据。日历就是表格数据的一个例子，一开始并不总是很明显。

2)我为一家医疗账单公司工作，我们内部工作的几乎所有布局都是用 CSS 完成的。然而，我们时不时地从保险公司得到纸质表格，我们的计费员必须使用，一个程序将它们转换成 HTML 格式，他们可以填写并通过内部网打印。为了确保表格被接受，他们需要非常紧密地匹配原始的纸质版本。对这些人来说，回到桌子上很简单。

同意 Thomas 的观点——经验法则是，如果在电子表格中有意义，就可以使用表。否则不行。

只是不要使用表格作为页面的布局，这是人们遇到的主要问题。

“赌桌大战 Divs”的故事就差一点点了。不是“ table”或者“ div”。这是关于使用语义 HTML。

即使 div 标记在布局良好的页面中也只起很小的作用。不要过度使用。如果您正确地将 html 组合在一起，就不需要那么多。诸如列表、字段集、图例、标签、段落等可以替代 div 或 span 常用来完成的大部分工作。Div 应该主要用于指示逻辑 Divvision 的有意义的情况，并且只有在绝对必要的情况下才用于额外的布局。对于表也是如此; 当您有表格数据时可以使用它，但在其他情况下不可以。

然后，您就有了一个更具语义性的页面，并且不需要在 CSS 中定义那么多的类; 您可以直接将标记作为目标。可能最重要的是，您拥有一个使用 Google 的页面(有趣的是)比使用相同的表格或 div 重量级的页面得分要高得多。最重要的是，它将帮助你更好地与部分听众建立联系。

所以如果我们回头看看表和 div 的比较，我的观点是，我们实际上已经到了 div 被过度使用，table 被过度使用的地步。为什么？因为当你认真思考的时候，会发现很多属于“表格式数据”的东西往往会被忽视。例如，在这个网页上的答案和评论。它们由多个记录组成，每个记录具有相同的字段集。它们甚至存储在一个 sql 服务器表中。这就是表格数据的确切定义。这意味着 html 表格标签绝对是一个很好的语义选择，可以像 Stack Overflow 这样布局文章。同样的原则也适用于许多其他事情。使用 table 标记来设置三列布局可能不是一个好主意，但是对于网格和列表使用 table 标记当然没有问题... 当然，除非您实际上可以使用 ol 或 ul (list)标记。

正如许多海报已经提到的，您应该使用表格来显示表格数据。

表格是在 HTML 3.2中介绍的，这里是规范中关于表格用法的相关段落:

[表格]可用于标记表格材料或用于布局目的..。

我在两种情况下使用表:

1)表格数据

2)任何时候，我想我的布局动态大小本身的内容

如果您的数据可以在二维网格中布局，请使用 <table>。如果不能，那就不要。将 <table>用于其他任何事情都是一种技巧(尽管通常没有合适的替代方案，尤其是在与较老的浏览器兼容时)。使用 <table> for的东西，显然应该是一个同样的坏。<div>和 <span>不是万能的，事实上，它们在语义层面上完全没有意义，应该不惜一切代价避免它们，而采用更多的语义替代品。

还有一个用处 表格，特别是标签: 文本对，技术上来说 be done in div boxes, but it's much, 在桌子上做这个要容易得多 我们可以争论这个标签: 文本框对 实际上是列表性的。

I see that a fair amount, especially among MS developers. And I've done it a fair amount in the past. It works, but it ignores some accessibility and best-practice factors. You should use labels, inputs, fieldsets, legends, and CSS to layout your forms. Why? Because that's what they are for, it's more efficient, and I think accessibility is important. But that's just my personal preference. I think everyone should try it that way first before condemning it. It's quick, easy, and clean.

@ Marius:

布局是表格式的数据吗? 不，虽然几年前它是标准的，但现在不是了: -)

另一种用法是使用表单，特别是标签: 文本框对。从技术上讲，这可以在 div 框中完成，但是在表中更容易做到这一点，而且可以认为 label: 文本框对实际上是表格化的。

我倾向于给标签一个固定的宽度，或显示在上面的行。

我会对公共网站的 HTML (表格 no-no-no，div yes-yes-yes)和半公共或私人网络应用的 HTML 做出区分，在这些应用中，我倾向于选择表格，甚至是页面布局。

大多数令人尊敬的“表格不好”的原因通常只是公共网站的问题，而不是网络应用程序的问题。如果使用 TABLE 比使用复杂的 CSS + DIV 可以得到相同的布局，并且在浏览器之间有更一致的外观，那么我通常会继续审核 TABLE。

我可以看到表格的论点，但有一个更好的选择... 你只需要卷起袖子，学习 CSS。

for example:

<fieldset>
<legend>New Blog Post</legend>


<label for="title">Title:</label>
<input type="text" name="title" />


<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>

您可以使用 html 并将表单布局为并排标签或文本框顶部的标签(这更容易)。有灵活性真的很有帮助。它也比两者的表等价物更少的 HTML。

有关 CSS 表单的一些优秀示例，请查看以下优秀示例:

Http://jeffhowden.com/code/css/forms/

Http://www.sitepoint.com/article/fancy-form-design-css/

Http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/

@ Jon Limjap

For label : textbox, neither divs nor tables are appropriate: <dl>s are

表用于表格数据。如果把它放在电子表格中是有意义的，那么就使用表格。否则，您可以使用一个更好的标记，如 div、 span、 ul 等。

Note: At the time the question was asked, there were practical reasons for using tables for some layout purposes. This is not necessary anymore due to browser improvements, so I have updated the answer.

当数据在逻辑上具有二维结构时，应使用 HTML<table>-元素。如果数据可以以行和列的形式结构化，并且可以对行和列都应用有意义的标题，那么您可能拥有表格数据。

我只有一行或一列数据，那么它不是表格数据-它只是线性内容。在将其视为表格数据之前，至少需要两行两列。

一些例子:

Using tables for placing sidebars and page headers/footers. This is not tabular data but page layout. Something like css grid or flexbox is more appropriate.

为报纸样式的专栏使用表。这不是表格式的数据-你仍然可以线性阅读它。类似 css 列的东西更合适。

我曾经使用纯 CSS，但我放弃了这种追求，转而使用表/CSS 混合方法作为最实用的方法。具有讽刺意味的是，这也是因为可访问性。试过在 Sidekick 上做 CSS 吗？真是个噩梦！你见过基于 CSS 的网站是如何在新的浏览器上呈现的吗？元素会重叠或者不能正确显示，我必须关闭 CSS。试过调整基于 CSS 的网站大小吗？如果他们在浏览器中使用缩放功能，他们看起来很糟糕，而且经常对盲人有害！如果这样处理表格，它们的伸缩性会好得多。当人们谈论无障碍时，我发现许多人毫无头绪，这让我很恼火，因为我是残疾人，而他们不是。他们真的和盲人一起工作吗？聋子？如果可访问性是一个主要问题，为什么99% 的视频没有关闭字幕？许多 CSS 纯粹主义者使用 AJAX，但是没有意识到 AJAX 经常使内容无法访问。

实际上，如果单元格是堆叠的(在移动设备上可以看到) ，那么只要在逻辑流中提供信息，就可以使用单个表作为主布局。CSS 理论听起来很棒，但是 partially在现实生活中有太多的技巧是可行的，这有悖于“纯粹”的理想

由于使用了 CSS 和表格的方法，我节省了很多时间来设计一个网站和维护更加容易。更少的黑客，更多的直觉。我很少接到人们打来的电话，说“我插入了一个 DIV，现在看起来一团糟!”更重要的是，绝对没有可访问性问题。

On this subject, I thought 这个 site was pretty funny.

当任何浏览器加载包含表的页面时，浏览器需要更多的时间来正确呈现标记。如果使用 div，浏览器会花费更少的时间，因为它更轻。另外，我们可以应用 css 使 div 显示为表,

桌子通常是重的，而 div 是轻的。

Div 是简单的 divisions，它们不能用来对页面中语义链接的部分进行分组。除此之外，它们没有别的含义。

表格最初是用来显示科学数据的，例如屏幕上的实验室结果。DaveRaggett 当然不打算将它们用于实现布局。

我发现，如果你记得上面的内容，如果它是你通常希望在表格中读到的东西，那么它就是合适的标签，如果它是纯布局的，那么使用其他东西来完成你的需求。

很明显，DIV 是用于布局的，但是由于以下原因，我被迫使用电子表格在 DIV 结构中进行网格布局:

百分比值的添加不允许与 div 进行适当的对齐，而在表的单元格上表示的相同值给出了预期的结果。

因此，我认为表不仅对数据有用，而且对上面的情况也有用，最重要的是，表仍然是符合 W3C 的浏览器，并且可替代的浏览器(例如，对于残疾人)能够正确地解释它们的浏览器。