Possible Duplicate:

  Why not use tables for layout in HTML?

在什么情况下应该选择表格而不是HTML编码中的DIV？

解决方案

回答

我相信表格内容。例如，如果我们将数据库表或者类似电子表格的数据打印出为HTML。

回答

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

当然，表格包装在DIV中：)

回答

当我呈现的数据确实是表格时。

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

我将要使用的另一种用途是表单，特别是label：textbox pair。从技术上讲，这可以在div框中完成，但是在表中执行此操作要容易得多，并且可以说label：textbox对实际上是表格形式的。

回答

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

表格->数据

股利->布局

(主要)

回答

如果我们希望使用语义正确的HTML，则应仅将表用于表格数据。

否则，我们可以使用表来实现所需的所有内容，但也许可以使用divs和CSS来做同样的事情。

回答

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

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

回答

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

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

回答

同意Thomas的经验-一般经验法则是，如果在spredsheet上有意义，则可以使用表格。否则不行。

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

回答

整个" Tables vs Divs"问题几乎没有遗漏。它不是"表"或者" div"。这是关于使用语义html的。

即使div标签在布局合理的页面中也只占一小部分。不要过度使用它。如果正确放置html，则不需要那么多。诸如列表，字段集，图例，标签，段落等之类的内容可以代替通常用于完成div或者span的大部分内容。 Div应该主要在表示逻辑划分的意义时使用，并且仅在绝对必要时才用于额外的布局。表也​​是如此；当我们拥有表格数据时使用它，否则不用。

这样一来，我们将获得一个更加语义化的页面，并且不需要在CSS中定义那么多的类。我们可以直接定位标签。可能最重要的是，页面在Google上的得分(轶事)要比同等的表格或者div-heavy页面要好得多。最重要的是，它将更好地与一部分受众建立联系。

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

回答

正如许多张贴者已经提到的那样，我们应该使用表格来显示表格数据。

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

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

回答

我在两种情况下使用表：

1)表格数据

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

回答

如果可以在二维网格中布置数据，请使用<table>。如果不能，那就不要。对其他任何东西使用<table>都是一种黑客(尽管通常没有一个具有适当替代方法的黑客，尤其是在与旧版浏览器的兼容性方面)。同样地，不使用<table>来代替显然应该是的东西。 <div>和<span>并不是全部。实际上，在语义层面上完全没有意义，应不惜一切代价避免使用它们，而应采用更多的语义替代方法。

回答

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来布局表单。为什么？因为这就是它们的用途，所以效率更高，而且我认为可访问性很重要。但这只是我个人的喜好。我认为每个人都应该在谴责之前先尝试这种方式。快速，简单和干净。

回答

@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.

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

回答

我要区分公共网站的HTML(表的no-no-no，divs是的-是-是)和半公开或者私有的Web应用程序的HTML，在这些HTML中，即使页面布局，我也倾向于使用表。

"表格不正确"的大多数令人尊敬的原因通常仅是公共网站存在的问题，而与webapp无关。如果我可以通过使用TABLE而不是复杂的CSS + DIV来获得相同的布局并且在浏览器中具有更一致的外观，那么我通常会继续进行并验证TABLE。

回答

我可以看到表格表格的参数，但是还有一个更好的选择……我们只需要袖手旁观并学习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也比两者中的任何一个都少。

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

回答

乔恩·林贾普

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

回答

表用于表格数据。如果有必要将其放在电子表格中，请使用表格。否则，将有更好的标记供我们使用，例如div，span，ul等。

回答

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

当数据在逻辑上具有二维结构时，应使用HTML<table>元素。如果数据可以按行和列进行结构化，并且可以将标题有效地应用于行和列，则我们可能具有表格数据。

我只有一行数据或者一列数据，那么它不是表格数据，而只是线性内容。我们至少需要两行两列才能将其视为表格数据。

一些例子：

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

将表格用于报纸样式的列。这不是表格数据，我们仍然会线性阅读。像css列之类的东西更合适。

回答

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

实用上，将单个表作为LONG用作主布局是可以的，因为如果单元格是堆叠的，则以逻辑流的形式提供信息(我们会在移动设备上看到)。 CSS理论听起来很不错，但在现实生活中有很多hack，这在一定程度上是可行的，这与"纯度"的理想背道而驰。

自从将CSS与表格一起使用以来，我已经节省了很多时间来设计网站，并且维护更加容易。更少的骇客，更直观。我收到的人打来的电话更少，说"我插入了DIV，现在看起来好像搞砸了！"更重要的是，绝对没有可访问性问题。

回答

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

回答

任何浏览器加载包含表的页面时，浏览器需要花费更多时间来正确呈现标记。好像使用了div一样，浏览器花费的时间更少，因为它更轻便。除此之外，我们还可以应用css使div显示为表格，

该表通常较重，而div较轻。

回答

Div是简单的"分区"，它们并不是用于将语义上链接的页面部分进行分组。除此之外，它们没有其他隐含含义。

表格最初旨在在屏幕上显示科学数据，例如实验室结果。戴夫·拉吉特(Dave Raggett)当然不打算让他们习惯于实施布局。

如果我们还记得上面的内容，并且我们通常希望在表中读取上面的内容，那么它会让我们牢记在心，这就是适当的标记，如果它是纯布局，则可以使用其他内容来满足需求。

回答

显然，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兼容的浏览器，并且其他浏览器(例如，对于残疾人来说)可以正确地解释它们。