用表格代替 DIV [重复]

https://stackoverflow.com/questions/30251

html
css

09-06-2019
|

题

可能的重复：
为什么不在 HTML 中使用表格进行布局？

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

解决方案

整个“Tables vs Divs”的事情几乎没有击中要害。它不是“table”或“div”。这是关于使用语义 html。

即使是 div 标签在布局良好的页面中也只扮演一小部分。不要过度使用它。如果你正确地将 html 放在一起，你不需要那么多。列表、字段集、图例、标签、段落等内容可以取代 div 或 span 经常用来完成的大部分功能。Div 应该主要在表明逻辑有意义时使用分区仅在绝对必要时才适用于额外布局。表也是如此；当您有表格数据时使用它，但其他情况下不要使用它。

然后你就有了一个更加语义化的页面，并且你不需要在 CSS 中定义那么多的类；您可以直接定位标签。可能最重要的是，您的页面在 Google 中的得分（据传言）比同等的表格或 div 较多的页面要高得多。最重要的是，它将帮助您更好地与部分受众建立联系。

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

其他提示

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

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

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

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

实际上，如果单元格堆叠（您会在手机上看到），只要您在逻辑流中提供信息，就可以使用单个表格作为主布局。CSS 理论听起来不错，但是 部分地 在现实生活中可行，但有太多的技巧，这违背了“纯粹”的理想。

自从使用 CSS 和表格方法以来，我节省了很多设计网站的时间，并且维护也变得更加容易。更少的技巧，更直观。我接到的电话越来越少，有人说“我插入了一个 DIV，现在看起来都搞砸了！更重要的是，绝对没有可访问性问题。

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

表格 -> 数据

Div -> 布局

（主要）

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

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

如果您只有单行或单列数据，那么它就不是表格数据 - 它只是线性内容。您至少需要两行和两列才能将其视为表格数据。

一些例子：

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

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

我会区分公共网站的 HTML（表格 no-no-no，div yes-yes-yes）和半公共或私人 Web 应用程序的 HTML，在这些应用程序中，即使是页面布局，我也倾向于更喜欢表格。

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

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

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

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

同意托马斯的观点——一般的经验法则是，如果在电子表格上有意义，你可以使用表格。否则不会。

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

我可以看到表格表格的参数，但有一个更好的选择......你只需要卷起袖子学习 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/

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

当然，表格被包裹在 DIV 中:)

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

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

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

1）表格数据

2）任何时候我希望我的布局能够根据其内容动态调整自身大小

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

关于这个问题，我想这网站很有趣。

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

2）我在一家医疗计费公司工作，我们内部工作的几乎所有布局都是使用 CSS 完成的。然而，我们时不时会从保险公司收到帐单人员必须使用的纸质表格，并且有一个程序会将它们转换为 html 格式，以便他们可以通过内联网填写和打印。为了确保表格被接受，它们需要与原始纸质版本非常匹配。对于这些，只需简单地回到表格即可。

表格用于表格数据。如果将其放入电子表格有意义，则使用表格。否则有更好的标签供您使用，例如 div、span、ul 等。

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

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

否则你可以使用表格来完成你想要的一切，但可能有一种方法可以使用 div和CSS。

@马吕斯：

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

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

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

@乔恩·林贾普

对于标签：文本框，div 和表格都不合适： <dl>是

我还有另一个用途将是形式，特别是标签：文本框对。从技术上讲，这可以在 div 框中完成，但它很多，在表格中执行此操作要容易得多，并且有人可能会争辩说 label：textbox 对实际上本质上是表格。

我发现这种情况相当多，尤其是在微软开发人员中。我过去已经做过很多次了。它有效，但它忽略了一些可访问性和最佳实践因素。您应该使用标签、输入、字段集、图例和 CSS 来布局表单。为什么？因为这就是它们的用途，所以效率更高，而且我认为可访问性很重要。但这只是我个人的喜好。我认为每个人都应该先尝试一下，然后再谴责它。它快速、简单、干净。

当任何浏览器加载包含表的页面时，浏览器都需要更多时间才能正确呈现标签。就好像使用 div 一样，浏览器花费的时间更少，因为它更轻。而且我们可以应用 css 使 div 显示为表格，

通常，表格重量较重，而 div 重量较轻。

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

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

所以我认为表格不仅对于数据仍然有用，而且对于上述情况也有用，最重要的是，表格仍然是符合 W3C 的浏览器，并且替代浏览器（例如针对残疾人）可以正确解释它们的浏览器。

div 很简单 divisions, ，它们不应该用于对在语义意义上链接的页面部分进行分组。除此之外，它们没有任何隐含的含义。

表格最初旨在显示科学数据，例如屏幕上的实验室结果。Dave Raggett 当然不希望它们被用来实现布局。

我发现，如果您还记得上面的内容，那么它会在您的脑海中保持相当清晰的状态，如果它是您通常希望在表格中阅读的内容，那么这就是合适的标签，如果它是纯布局，则使用其他内容来满足您的需求。

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow