Question

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

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

Answer 1

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

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

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

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

Answer 2

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

我觉得有些网页设计师在某些网站上使用表格数据上的div来表示荒谬。

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

Answer 3

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

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

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

Answer 4

通常在您不使用表格提供布局时。

表格 - ＆gt;数据

Divs - ＆gt;布局

（主要）

Answer 5

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

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

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

一些例子：

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

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

Answer 6

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

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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

例如：

<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/

Answer 10

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

当然桌子包裹在DIV中：）

Answer 11

表格是针对表格内容而设计的，而非布局。

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

Answer 12

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

1）表格数据

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

Answer 13

如果您的数据可以在二维网格中布局，请使用<table>。如果不能，不要。使用<table>进行其他任何操作都是一种黑客攻击（尽管通常没有一种方法可以替代，特别是在与旧浏览器的兼容性方面）。不使用<table> 显然应该是一个同样糟糕的东西。 <div>和<span>不适合所有事情;事实上，在语义层面上完全没有意义，不惜一切代价避免使用它们，而是支持更多的语义替代方案。

Answer 14

关于这个问题，我认为this网站非常有趣。

Answer 15

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

Answer 16

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

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

Answer 17

@Marius：

布局是否有表格数据？不，虽然它是几年前的标准，但现在不是： - ）

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

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

Answer 18

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

Answer 19

@Jon Limjap

对于label：textbox，div和table都不合适：<dl> s

Answer 20

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

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

Answer 21

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

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

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

Answer 22

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

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

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

Answer 23

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

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

Answer 24

我将拥有的另一个用途将是表格，特别是标签：文本框对。这在技术上可以在div框中完成，但它很多，在表格中更容易做到这一点，并且人们可以争辩说标签：文本框对实际上是表格式的。

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

表而不是DIV

24 个答案: