是否应该不惜一切代价避免在 HTML 中使用表格？
https://stackoverflow.com/questions/82391
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian题
解决方案
一点都不。但对于表格数据使用表格。只是不要将它们用于一般布局。
但是，如果您显示表格数据，例如结果甚至表单，请继续使用表格！
其他提示
我想我不是这里的大多数，但我仍然看到 HTML 中的表格有很多用途。当然，是的，对于表单之类的东西，你根本无法打败表格。使用 DIV 肯定可以尝试排列标签和随附的表单字段，但是这将是一个 PITA，并且在某些情况下调整页面大小会很丑陋。一张桌子在这里可以创造奇迹。
但也要考虑更大的问题。例如，您是否尝试过仅使用 DIV 和 CSS 创建带有页眉和页脚的标准 3 列布局？同样，这是很有可能的，并且大约有 1000 个网站提供了示例，但它们都往往遇到相同的问题。第一个问题是，如果没有某种 JavaScript 帮助，列永远不会真正变得相同高度。第二个问题是改变布局通常是一件棘手的事情，因为让一切从一开始就“恰到好处”是一种平衡行为，所以你不想弄乱它。最后，这又回到了最后一点——这并不容易。你必须布置所有的 DIV，然后返回并创建神奇的 CSS，强制这些 DIV 进入正确的位置，然后花几个小时调整它直到正确......啊。然后在没有查看器的情况下查看 HTML 确实让您不知道页面是什么样子，因为它最终都被 CSS 重新解释了。
现在，选项B。使用桌子。花大约 30 秒的时间键入 <tr> 和 <td> 标记，可能根本不需要 CSS，也不需要 javascript 'fixit'，只需查看 HTML 就可以确切地知道它会是什么样子。
当然，有支持和反对表格的争论，纯粹主义者似乎赞成使用 DIV 进行布局，但不要仅仅因为有人告诉你表格是邪恶的，就出于宗教原因使用 DIV。使用最适合您、您的页面以及您的查看者与页面交互的方式。如果那是一张桌子，那就使用它。如果没有，就不要。
到目前为止，每个人都说过表应该只用于表格数据，这是事实。看看 SO 上任何页面的 HTML 源代码，你就会发现他们有不同的想法......
我认为他们的理由是 有时 使用表格就简单多了。不过，有很多非常好的可用性原因可以解释为什么要避免使用它们。
除了为了 表格数据, ，不幸的是，如果您想创建，表仍然是必要的 灵活的 网格布局，例如以跨浏览器兼容方式的复杂表单。
CSS2 支持创建灵活的网格布局，而无需使用 table 元素通过 显示属性, ，但这就是 IE6 或 IE7 不支持.
然而，对于大多数基本的表单布局，CSS 应该足够了。
如果 CSS 等效项能够方便地设置“类似表格”的布局，那么我很乐意使用 CSS。我发现模仿其他人在这里列出的东西（单元格高度相同、自动增长的行等）所花费的时间根本不值得。在大多数情况下，与快速拼凑一张桌子相比，我没有得到投资回报。
所有浏览器都可以就表格的布局方式达成一致。嘭。完毕。
我的 CSS 愚蠢行为通常是这样的：尝试在 CSS 中设置类似表格的布局。花 20 分钟或更长时间在 Mozilla 中完成所有操作，然后在 IE 中打开它。再花 30 分钟在这两个浏览器之间进行调整。假装世界上只有两种浏览器，因为我实际上需要完成一些工作。
我相信 CSS 的承诺：关注点分离。问题是，对于那些需要提高工作效率的人来说，CSS 还没有准备好迎接黄金时段。或者可能是浏览器的渲染引擎——无论哪种。
CSS 的好处在于它将设计和布局与内容分开。
如果您有表格数据，那么使用 <TABLE> 标签。如果你想布局不同的内容块那么你应该使用 <DIV> 或者 <SPAN> 和CSS。
表格用于输出表格数据。您可能在电子表格中显示的任何内容、结果列等。
使用 CSS 而不是表格的建议是针对柱状布局，这并不是真正的表格。从来没有打算建议应该完全删除桌子。
表格在 CSS2 中没有等效项，并且使用 css 复制它们并不那么容易。表中难以重现的特定部分是列的自动调整大小。虽然让第一行在整个页面上增长到相同的大小很容易，但下一行很难动态匹配列大小或每个单元格大小，事实上，如果不使用其他脚本语言（例如JavaScript、PHP 或其他。您可以使用最大和最小宽度，以及设置单元格大小的百分比，或硬编码单元格宽度，但动态增长的单元格对于一行工作正常，它下面的下一行将不匹配。
浏览这些答案，我没有看到一个现实世界的原因，表格是布局所必需的，那就是 html 电子邮件。
我在一家非常非常大的金融公司工作，我们每个月跟踪大约 600 个不同的工作......其中许多是多个电子邮件活动。
您不能使用 css 为任何邮件阅读器进行布局。您可以使用一些与颜色、字体和大小相关的内联 css 规范，甚至行高也相当广泛，但对于布局，您必须使用表格作为所有主要和最次要的电子邮件阅读器（Outlook 97/ 03、Entourage、MSN 等）读起来就很好。
当您的 td 没有指定高度/宽度（无论它们是否包含数据）时，表格的问题就会发挥作用。因此，“损坏的”表格布局通常可以通过注意属性来修复，是的......html 中的空白...是的，空白不应该重要。
因此，如果您曾经在一家大公司/公司工作，或者您拥有一个非常大的客户，请准备好将所有当前技术扔到门外，戴上您的 html 表帽子！
我认为这一切都取决于时间/努力。虽然纯粹主义者可能会说“只对表格数据使用表格”，但我过去曾使用表格来简化跨浏览器布局。
对我来说，这是时间利用的问题。我可以花时间研究 CSS 以使其正确，也可以将其扔到表格中，花更少的时间。我倾向于走这条路，直到一切正常运行。一旦功能到位，我就会回去完善 CSS/HTML。
我必须在这里采用表格方法。其原因很简单，就是成本问题。在一个得到良好支持的以 CSS 为中心的布局方法出现之前，我谈论的是宏观层面……而不是容器内的微观层面，尝试将 CSS 定位硬塞到通用的布局方法中是低效的。您必须从为开发写支票的人的角度来处理这个问题。
几年前，我与一家大型连锁酒店签订了开发和维护网站的合同。我们采用了表驱动布局；您的基本页眉、正文、页脚以及左/右列。我们还使用表格来表示一些更精细的元素，例如非图形按钮。该连锁店的母公司维护自己的网站，并采用纯 CSS 布局方法。当 IE7 发布时，我们的网站运行得很好，没有任何改变。母公司的网站一团糟。总的来说，他们总共花费了大约 1000 个小时（在会议/开发/QA/推出之间）来解决问题。
当您获得报酬来开发网站时，您的部分责任是减轻未来的风险并最大限度地减少未来的开发成本，特别是如果这些成本不会为网站（您的产品）增加价值。
我对此非常简单和基本的看法是，表格是用于表格数据的，而不是将一个东西放置在另一个元素的顶部或旁边，因为你碰巧喜欢它在那里。
所以 - 如果你想显示数据表：这样做（用一张桌子）。如果您想在页面上放置内容：使用CSS。
我想你可能有点困惑。CSS 是一种设计 HTML 文档样式的方法，无论是表格元素还是“div”。
过去，HTML 中使用表格来设计整个页面布局。多个嵌套表（通常由 Dreamweaver 等 WYSIWYG 程序生成）是很常见的，这会导致维护噩梦。
自从 CSS 样式表的引入和采用以来，现在只使用表格来存储表格数据是正确的。这意味着如果您的数据最自然地呈现为表格，请使用表格元素。您仍然可以使用 CSS 设置表格样式。
然而，我通常不赞成这种方法，因为它重复现有的功能，可以使用元素来构建类似表格的结构。事实上，有几个网站可以为您生成此类代码，但我手头没有链接。
还请记住，某些用户可能会以纯文本模式查看，或使用屏幕阅读器，这两种情况都可能会破坏页面（例如垂直而不是水平阅读列），因此要正确使用表格。
华泰
我相信并希望使用表格进行布局的时代已经一去不复返了。简单的说： 桌子就是桌子，没有别的.
我认为未来几年将出现的新的、类似的激烈争论的话题是：我应该使用新的 CSS 功能吗 展示: 桌子, 表格单元格, 表格行 ETC。用于布局？？？:-)
我认为这种情况出现如此多的原因是，在创建结构和布局时使用 html 表格比 CSS 更容易理解。使用 CSS 更加抽象，但有助于分离代码。
为了回应“结构”论点……根据定义，不是使用 html 表格为数据提供结构，以便您将其识别为“表格”。无论是 CSS 还是 html，您都在控制数据的流动和布局。无论是表格还是其他...
如果 CSS 表如此重要（我确信我的回答会引发某种激烈的争论），为什么 Visual Studio 中没有一种机制来使用 CSS 创建布局？哦，你没有检查VS中的布局功能吗？是的，您可以直接从 Microsoft 获得表格。我不是在抱怨，只是想指出，如果这对世界其他地方也同样重要，你就会看到 MS 转向 CSS。
在我看来，做最适合你的项目的事情。对于一两页的 Web 项目，我仍然使用 html，因为它的作用是显而易见的。使用 CSS 更加抽象，有些早上我只是没有喝那么多咖啡。HTML 表格可能会很快变得混乱。CSS 需要更多的时间才能变得混乱，但也会的。
尽管对于某些布局来说，使用表格一开始可能看起来更简单，但当维护时间到来时，使用 CSS 就会得到回报。特别是如果您想要更改某些内容的位置，或者想要在多个地方使用相同的布局。
恕我直言，表格只能在呈现表格时使用。切勿用于布局目的。
表格用于显示表格数据。没有什么可补充的了:-D
如果有理由以语义方式使用表格（例如显示表格数据），请使用表格。
只需不使用表格来进行布局即可。通过语义标记，您可以获得许多搜索引擎和可访问性的好处。
大多数情况下，保留表仅用于表格数据是可行的。有些布局问题用表格比其他任何东西都更容易解决。例如，垂直对齐和等高列。在栅栏的另一边，有一些复杂的数据表，我使用了浮动 div，因为这些表不符合要求。
与其他任何事情一样，使用正确的工具完成正确的工作，有时最实用的工具并不是您想象的那样。也就是说，我很少使用表格进行布局，即使在我给出的示例中也是如此，因为我不可避免地遇到了一些问题，使得我无论如何都必须使用 CSS 来完成。你的旅费可能会改变。
我也不喜欢使用表格来排列页面上的项目的想法。然而这不应该成为一种宗教——桌子很糟糕。我遇到过一个示例，其中我有一个三列布局，并且需要中心列随内容一起增长。最后，最简单且在所有需要的浏览器上运行良好的解决方案是使用表格。恕我直言，CSS 仍然有一些缺点，有时最好使用简单有效的东西，而不是盲目地遵循某些想法（“表格很糟糕......”）。
如果您的布局有点表格化，您甚至可以使用它们进行布局。我喜欢表格和单元格动态调整以适应浏览器窗口宽度的功能。永远不要使用任何固定的宽度或高度，那只会把事情搞砸。
这很容易。将您的网页视为纸上的真实页面。仅当您在纸上绘制表格时才应使用网页上的表格。
另一个技巧是仅使用边框 > 0 的表格。这样，您仅在以下情况下才使用表格： 意思是 你想要一张桌子（而不是为了布局）。
似乎取决于您开始设计时浏览器的功能。如果您一开始只有表格可以工作，那么您可能会一直想使用它，因为您知道这一点。或者，如果这就是您喜欢使用的，即使在浏览器已经先进到能够渲染 CSS 之后……
我只是不喜欢一遍又一遍地做同样的事情，因为它们很容易，而且我知道如何做。那很无聊。我宁愿学习新技术，也不愿因为我不知道如何使用它或者我认为我没有时间学习而放弃某些东西。
我不喜欢使用表格，我不理解它们，它们看起来很陌生并且令人反感，但那是因为我从 2005 年开始使用。我也不使用设计程序来生成模板，因为我更喜欢手动编码。
我假设你的问题实际上是 - “我应该避免使用 HTML 表格进行布局吗？”. 。答案是：不。事实上，表格专门用于控制布局。使用表格来控制整个页面的布局的缺点是源文件很快就会变得难以手动理解和编辑。使用表格来控制整个布局的一个（可能的）优点是如果对跨浏览器兼容性和渲染有特定的担忧。我更喜欢直接使用 HTML 源文件，对我来说，使用 CSS 比在整个布局中使用表格更容易。
仅当您尝试显示表格数据时，表格才有意义，仅此而已。对于布局，您应该始终使用 DIV 并使用 CSS 定位。
如果您需要使用表格，那么您的布局可能很糟糕。向我展示一个使用表格的精心设计的网站，我将向你展示一千个不使用表格的网站。
很多人都在使用“纯粹主义者”这个词。这是垃圾。您会将报纸副本打印在一本书中吗？您会用 Excel 设计宣传册吗？不？那么为什么要使用表格来显示非表格数据呢？
大多数时候，人们在放弃表格进行布局时遇到的困难是由于他们自己对 HTML/CSS/良好设计原则的无知造成的。虽然您可能会发现很难使多列布局在垂直方向上均匀延伸，但您可能会考虑尝试不同的方法。DIV 不是 TABLE。您可以使用宽边框、页面背景等制作假列。花一些时间实际学习做你打算做的事情，否则永远会被视为没有任何有用技能的人。（http://www.alistapart.com 将是一个好的开始）
老实说，我对这个问题在 2008 年突然出现感到惊讶。当我上高中时，DIV 就出现了。别再当菜鸟了。
正如上面提到的，表格在移动设备和屏幕阅读器上很难失败。
