可能重复：
为什么不在 HTML 中使用表格进行布局？
在什么情况下你应该在 HTML 编码中选择表格而不是 DIV？
Krishna Kumar
问问题
18671 次
24 回答
197
整个“Tables vs Divs”的事情几乎没有错过。它不是“表”或“div”。这是关于使用语义html。
即使是 div 标签在布局良好的页面中也只占很小的一部分。不要过度使用它。如果你把你的 html 正确地放在一起，你不应该需要那么多。列表、字段集、图例、标签、段落等可以取代 div 或 span 经常用来完成的大部分内容。Div 应该主要用于表示逻辑分区是有意义的，并且仅在绝对必要时才用于额外的布局。表也是如此；当您有表格数据时使用它，否则不要使用它。
然后你有一个更加语义化的页面，你不需要在你的 CSS 中定义那么多的类；您可以直接定位标签。可能最重要的是，您的页面在 Google 上的得分（轶事）比等效的表格或 div-heavy 页面要好得多。最重要的是，它将帮助您更好地与一部分观众建立联系。
因此，如果我们回过头来从 table 与 div 的角度来看待它，我认为我们实际上已经到了 div 被过度使用而 table 被使用不足的地步。为什么？因为当你真正考虑它时，有很多东西属于“表格数据”的范畴，往往被忽视。例如，在这个网页上的答案和评论。它们由多条记录组成，每条记录都具有相同的字段集。它们甚至存储在 sql server 表中，以便大声喊叫。这是表格数据的确切定义。这意味着一个 html 表格标签绝对是一个很好的语义选择来布局类似 Stack Overflow 上的帖子。同样的原则也适用于许多其他事情。使用表格标签来设置三列布局可能不是一个好主意，但它'
于 2008-08-27T14:25:11.543 回答
52
当我呈现的数据确实是表格时。
我觉得有些网页设计师在某些网站的表格数据上使用 div 很荒谬。
我将使用它的另一种用途是表单，尤其是标签：文本框对。这在技术上可以在 div 框中完成，但在表格中执行此操作要容易得多，并且可以争辩说 label:textbox 对实际上是表格的。
于 2008-08-27T14:22:47.743 回答
24
我曾经做过纯 CSS，但我放弃了这种追求，转而采用混合 table/css 方法作为最实用的方法。具有讽刺意味的是，这也是因为可访问性。曾经尝试在 Sidekick 上做 CSS 吗？什么样的恶梦！见过如何在新浏览器上呈现基于 CSS 的网站吗？元素会重叠或无法正确显示，我不得不关闭 CSS。曾经尝试过调整基于 CSS 的网站的大小吗？如果他们在浏览器中使用缩放功能，它们看起来很糟糕并且通常对盲人有害！如果你用表格来做到这一点，它们的规模会更好。当人们谈论可访问性时，我发现很多人对此一无所知，这让我很恼火，因为我是残疾人，而他们不是。他们真的和盲人一起工作过吗？聋子？如果可访问性是主要问题，为什么 99% 的视频都没有隐藏字幕？许多 CSS 纯粹主义者使用 AJAX，但没有意识到 AJAX 经常使内容无法访问。
务实地说，可以使用单个表格作为 LONG 的主要布局，因为如果单元格是堆叠的（您会在手机上看到），您可以在逻辑流中提供信息。CSS 理论听起来不错，但在现实生活中部分可行，有太多的 hack，这与“纯粹”的理想背道而驰。
自从使用带有表格的 CSS 方法以来，我节省了很多设计网站的时间，并且维护也变得更加容易。更少的hack，更直观。我很少接到有人说“我插入了一个 DIV，现在看起来一切都搞砸了！”的电话越来越少。更重要的是，绝对没有可访问性问题。
于 2009-01-29T19:00:14.167 回答
21
通常每当您不使用表格来提供布局时。
表格 -> 数据
div -> 布局
（主要）
于 2008-08-27T14:22:49.317 回答
20
注意：在提出问题时，出于某些布局目的使用表格是有实际原因的。由于浏览器的改进，这不再是必需的，所以我更新了答案。
<table>当数据在逻辑上具有二维结构时，应使用HTML元素。如果数据可以按行和列进行结构化，并且您可以将标题有意义地应用于行和列，那么您可能拥有表格数据。
如果您只有单行或单列数据，那么它不是表格数据 - 它只是线性内容。您至少需要两行两列才能将其视为表格数据。
一些例子：
使用表格放置侧边栏和页眉/页脚。这不是表格数据，而是页面布局。像 css grid 或 flexbox 这样的东西更合适。
使用表格作为报纸式的专栏。这不是表格数据 - 您仍然可以线性读取它。像 css 列这样的东西更合适。
于 2008-09-15T21:37:03.500 回答
13
我会区分用于公共网站的 HTML（表格 no-no-no，div 是 - 是 - 是的）和用于半公共或私有 Web 应用程序的 HTML，在这些应用程序中，即使页面布局我也倾向于使用表格。
“表格不好”的大多数可敬的原因通常只是公共网站的问题，而不是 webapps 的问题。如果我可以通过使用 TABLE 而不是复杂的 CSS+DIV 获得相同的布局并在浏览器中获得更一致的外观，那么我通常会继续并批准 TABLE。
于 2008-09-03T19:34:54.317 回答
11
于 2008-08-27T14:26:27.500 回答
8
同意托马斯的观点——一般的经验法则是，如果它在电子表格上有意义，你可以使用一张桌子。否则不行。
只是不要使用表格作为页面的布局，这是人们对表格的主要问题。
于 2008-08-27T14:23:56.257 回答
7
我可以看到表格的参数，但有一个更好的选择......你只需要卷起袖子学习 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/
于 2008-09-05T16:52:31.537 回答
6
我通常会选择表格来显示表单类型信息（名字、姓氏、地址等），其中跨多行的衬里标签和字段很重要。我用于布局的 DIV。
当然，表格是用 DIV 包裹的 :)
于 2008-08-27T14:22:16.463 回答
4
表格是为表格内容设计的，而不是为布局设计的。
因此，如果您使用它们来显示数据，请不要感到难过。
于 2008-08-27T14:23:02.953 回答
4
我在两种情况下使用表格：
1) 表格数据
2) 任何时候我希望我的布局根据其内容动态调整大小
于 2008-08-27T14:43:17.740 回答
3
如果您的数据可以布置在二维网格中，请使用<table>. 如果不能，不要。<table>用于其他任何东西都是一种技巧（尽管通常没有适当的替代品，尤其是在与旧浏览器的兼容性方面）。不使用显然应该是<table> 的东西同样糟糕。<div>并不<span>适合一切；事实上，它们在语义层面上完全没有意义，因此应不惜一切代价避免它们，以支持更多语义替代方案。
于 2008-08-27T16:34:36.787 回答
3
关于这个问题，我觉得这个网站很有趣。
于 2009-01-29T22:01:06.640 回答
2
1) 用于显示表格数据。日历是表格数据的一个示例，起初并不总是很明显。
2) 我在一家医疗计费公司工作，我们内部工作的几乎所有布局都是使用 CSS 完成的。但是，我们有时会从保险公司获得纸质表格，我们的记账员必须使用这些表格，并且程序会将它们转换为 html 格式，以便他们可以通过 Intranet 填写和打印。为了确保表格被接受，他们需要非常接近原始纸质版本。对于这些，回到表格很简单。
于 2008-08-27T14:23:03.653 回答
2
表格用于表格数据。如果将其放在电子表格中有意义，则使用表格。否则，您可以使用更好的标签，例如 div、span、ul 等。
于 2008-09-09T04:46:38.300 回答
1
我相信只是表格内容。例如，如果您将数据库表或类似电子表格的数据打印到 HTML。
于 2008-08-27T14:21:09.073 回答
1
如果您希望拥有语义正确的 HTML，那么您应该只将表格用于表格数据。
否则，您可以将表格用于您想要的所有内容，但可能有一种方法可以使用divs 和 CSS 来做同样的事情。
于 2008-08-27T14:22:51.580 回答
1
@马吕斯：
是布局表格数据吗？不，虽然几年前它是标准的，但现在不是:-)
我将使用它的另一种用途是表单，尤其是标签：文本框对。这在技术上可以在 div 框中完成，但在表格中执行此操作要容易得多，并且可以争辩说 label:textbox 对实际上是表格的。
我倾向于给标签一个固定的宽度，或者将它显示在上面的行上。
于 2008-09-03T19:10:30.630 回答
1
@乔恩·林贾普
对于标签：文本框，div 和表格都不合适：<dl>s 是
于 2008-09-05T16:59:26.527 回答
0
我将使用它的另一种用途是表单，尤其是标签：文本框对。这在技术上可以在 div 框中完成，但在表格中执行此操作要容易得多，并且可以争辩说 label:textbox 对实际上是表格的。
我看到相当多，尤其是在 MS 开发人员中。我过去做过很多。它有效，但它忽略了一些可访问性和最佳实践因素。您应该使用标签、输入、字段集、图例和 CSS 来布局表单。为什么？因为这就是它们的用途，所以效率更高，而且我认为可访问性很重要。但这只是我个人的喜好。我认为每个人都应该在谴责之前先尝试一下。它快速、简单、干净。
于 2008-09-03T18:37:06.000 回答
0
当任何浏览器加载包含表格的页面时，浏览器需要更多时间才能正确呈现标签。就像使用 div 一样，浏览器需要的时间更少，因为它更轻。此外，我们可以应用 css 使 div 显示为表格，
桌子通常很重，而 div 很轻。
于 2009-06-10T14:16:45.647 回答
0
Div 很简单divisions，它们不用于对在语义上链接的页面部分进行分组。除此之外，它们没有任何隐含的含义。
表格最初旨在显示科学数据，例如屏幕上的实验室结果。Dave Raggett 当然不打算让它们习惯于实现布局。
如果您记住以上内容，我发现它会让您的头脑保持相当清晰，如果它是您通常希望在表格中阅读的内容，那么这就是适当的标签，如果它是纯布局，那么使用其他东西来满足您的需求。
于 2010-05-10T10:40:04.163 回答
0
很明显，DIV 用于布局，但由于这个原因，我碰巧“被迫”使用电子表格在 div 结构中进行网格布局：
百分比值的添加不允许与 div 正确对齐，而表格单元格上表示的相同值给出了预期的结果。
所以我认为表格不仅对数据有用，而且对上述情况也有用，最重要的是，表格仍然是符合 W3C 的浏览器，并且替代浏览器（例如残疾人）可以正确解释它们。
于 2010-06-30T20:30:47.480 回答