关于html：表而不是DIV

Tables instead of DIVs

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
Why not use tables for layout in HTML?

在什么条件下你应该在HTML编码中选择表而不是DIV？

整个"桌子与分区"的事情几乎没有错过这个标志。它不是"桌子"或"div"。这是关于使用语义html。

即使div标签在精心布局的页面中也只占很小的一部分。不要过度使用它。如果你正确地将你的html放在一起，你不应该需要那么多。列表，字段集，图例，标签，段落等内容可以替代div或span经常用来完成的大部分内容。 Div应该主要用于表示逻辑划分的情况，并且在绝对必要时仅用于额外的布局。表格也是如此;有表格数据时使用它，但不是。

然后你有一个更加语义的页面，你不需要在CSS中定义很多类;您可以直接定位标签。可能最重要的是，你有一个页面，通过谷歌(传闻)得分比同等的表格或重页面更好。最重要的是，它可以帮助您更好地与部分观众建立联系。

因此，如果我们回过头来看一下表格与div的比较，我认为我们实际上已经达到了div过度使用且表格未得到充分利用的程度。为什么？因为当你真正考虑它时，有许多东西属于"表格数据"的类别，往往被忽视。例如，在这个网页上的答案和评论。它们由多个记录组成，每个记录具有相同的字段集。它们甚至存储在一个sql server表中，大声喊叫。这是表格数据的确切定义。这意味着一个html表标签绝对是一个很好的语义选择，可以像Stack Overflow上的帖子一样布局。同样的原则也适用于许多其他事情。使用表格标签来设置三列布局可能不是一个好主意，但是当然可以将它用于网格和列表......当然，除非你可以实际使用ol或ul(列表)标签。

当我提交的数据确实是表格式的。

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

我将拥有的另一个用途是表单，特别是标签：文本框对。这在技术上可以在div框中完成，但是在表中执行此操作要容易得多，并且可以说标签：文本框对实际上是表格式的。

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

实际上，可以将单个表作为主要布局使用LONG，因为如果单元格是堆叠的(您在移动设备上看到的东西)，则在逻辑流程中提供信息。 CSS理论听起来很棒但在现实生活中部分可行，有太多黑客攻击，这违背了"纯洁"的理想。

由于使用CSS with tables方法，我节省了大量设计网站的时间，并且维护更加容易。更少的黑客，更直观。我收到的电话更少，说"我插入了一个DIV，现在它看起来都搞砸了！"更重要的是，绝对没有可访问性问题。

通常，每当您不使用表格提供布局时。

表 - >数据

分区 - >布局

(主要是)

注意：在询问问题时，出于某些布局目的使用表格的实际原因。由于浏览器的改进，这不再是必要的，所以我更新了答案。

当数据在逻辑上具有二维结构时，应使用HTML

-elements。如果数据可以按行和列结构化，并且您可以有意义地将标题应用于行和列，那么您可能具有表格数据。

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

一些例子：

使用表格放置侧边栏和页眉/页脚。这不是表格数据，而是页面布局。像css grid或flexbox这样的东西更合适。

将表用于报纸式列。这不是表格数据 - 您仍然可以线性读取它。像css列这样的东西更合适。

我会区分公共网站的HTML(表no-no-no，divs yes-yes-yes)和半公共或私有Web应用程序的HTML，我倾向于更喜欢表甚至页面布局。

"表格不好"的大多数可敬的原因通常只是针对公共网站的问题，而不是webapps的问题。如果我可以通过使用TABLE而不是复杂的CSS + DIV来获得相同的布局并且在浏览器之间具有更一致的外观，那么我通常会继续使用TABLE。

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

表格在HTML 3.2中引入，这里是关于其用法的规范中的相关段落：

[tables] can be used to markup tabular material or for layout purposes...

同意托马斯 - 一般的经验法则是如果在spreedsheet上有意义，你可以使用表格。否则不是。

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

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

例如：

1
2
3
4
5
6
7
8
9
10

<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也比同等表的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/

我通常会选择表格来显示表格类型信息(名字，姓氏，地址等)，其中多行的衬里标签和字段很重要。我用于布局的DIV。

当然桌子是用DIV包裹的:)

我在两种情况下使用表格：

1)表格数据

2)任何时候我希望我的布局动态调整其内容的大小

表格是针对表格内容而设计的，而不是用于布局。

因此，如果您使用它们来显示数据，请不要感到难过。

如果您的数据可以在二维网格中布局，请使用

。如果不能，不要。使用

进行其他任何操作都是一种破解(尽管通常没有一种具有适当选择的方法，特别是在与旧版浏览器的兼容性方面)。不使用

显然应该是一个同样糟糕的东西。和不适用于所有内容;事实上，在语义层面上完全没有意义，不惜一切代价避免使用更多的语义替代方法。

在这个问题上，我认为这个网站很有趣。

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

2)我在一家医疗账单公司工作，我们内部工作的几乎所有布局都是使用CSS完成的。但是，我们不时会从保险公司那里获得我们的报酬者必须使用的纸质表格，并且程序会将它们转换为html格式，他们可以通过内联网填写和打印。为了确保表格被接受，他们需要非常接近地匹配原始纸张版本。对于这些，回到表格很简单。

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

我相信只是表格内容。例如，如果您将数据库表或类似电子表格的数据打印到HTML。

@Marius：

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

One other use I would have for it would be forms, particularly label : textbox pairs. This could technically be done in div boxes, but it's much, much easier to do this in tables, and one can argue that label:textbox pairs are in fact tabular in nature.

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

@Jon Limjap

对于label：textbox，div和table都不合适：

如果您希望语义正确的HTML，那么您应该仅将表用于表格数据。

否则，您可以使用表格来处理所需的一切，但可能有一种方法可以使用div和CSS执行相同的操作。

很明显，DIV用于布局，但由于这个原因，我被"强迫"使用电子表格在div结构中进行网格布局：

the addition of percentage values did not allow a proper alignment with the div, while the same values expressed on cells of tables gave the expected result.

所以我认为这些表不仅对数据有用，而且对于上面的情况仍然有用，除此之外，表仍然是符合W3C标准的浏览器和替代浏览器(例如对于禁用的)正确解释它们。

当任何浏览器加载包含页面的页面时，浏览器需要更多时间来正确呈现标记。在使用div的情况下，浏览器占用的时间更少，因为它更轻。而且我们可以应用css使div显示为表格，

桌子通常很重，而且重量很轻。

Div是简单的divisions，它们不能用于对页面中与语义相关联的部分进行分组。除此之外，它们没有隐含的含义。

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

如果你记得上面的内容，如果你通常希望在表格中读到的话，我会发现它在你的脑海中保持相当清晰，那么这是合适的标签，如果是纯粹的布局，那么就用别的东西来完成你的需要。

One other use I would have for it
would be forms, particularly label :
textbox pairs. This could technically
be done in div boxes, but it's much,
much easier to do this in tables, and
one can argue that label:textbox pairs
are in fact tabular in nature.

我看到相当数量，尤其是MS开发人员。而且我在过去做了相当多的事情。它有效，但它忽略了一些可访问性和最佳实践因素。您应该使用标签，输入，字段集，图例和CSS来布局表单。为什么？因为这就是它们的用途，它更有效率，而且我认为可访问性非常重要。但这只是我个人的偏好。我想在谴责之前，每个人都应该先尝试一下。它快速，简单，干净。