建议在 HTML 页面中使用表格（现在我们有了 CSS）？
表的应用有哪些？表格有哪些 CSS 中没有的特性/能力？
Niyaz
问问题
16449 次
27 回答
80
一点都不。但是对表格数据使用表格。只是不要将它们用于一般布局。
但是，如果您显示表格数据，例如结果甚至表格，请继续使用表格！
于 2008-09-17T12:10:50.443 回答
71
我想我不是这里的大多数人，但我仍然看到 HTML 中的表格有很多用途。当然，是的，对于表格之类的东西，您根本无法击败桌子。尝试排列标签和随附的表单字段当然可以使用 DIV，但是这将是一个多么好的 PITA，并且在某些情况下调整页面大小会很丑陋。一张桌子在这里创造奇迹。
但也要考虑更大的问题。例如，您是否尝试过仅使用 DIV 和 CSS 创建带有页眉和页脚的标准 3 列布局？同样，这是很有可能的，大约有 1000 个网站有示例，但它们都倾向于遇到同样的问题。第一个问题是，在没有某种 javascript 帮助的情况下，这些列永远不会真正地变成相同的高度。第二个问题是更改布局通常是一件棘手的事情，因为要让所有东西都“恰到好处”开始有点平衡，所以你不想弄乱它。最后，这又回到了最后一点——这并不容易。你必须布置所有的 DIV，然后返回并创建魔法 CSS 来强制这些 DIV 进入正确的位置，然后花几个小时调整它，直到它是正确的......呃。然后在没有查看器的情况下查看 HTML 真的会让你不知道页面是什么样子，因为它最终都被 CSS 重新解释了。
现在，选项 B。使用表格。花大约 30 秒输入 <tr> 和 <td> 标记，可能根本没有 CSS，没有 javascript 'fixit'，并且仅通过查看 HTML 就知道它会是什么样子。
当然，有支持和反对表格的争论，纯粹主义者似乎更喜欢 DIV 的布局，但不要仅仅因为有人告诉你表格是邪恶的，就出于宗教原因使用 DIV。使用最适合您、您的页面以及查看者将与页面交互的方式。如果那是一张桌子，那就用它。如果没有，不要。
于 2008-09-17T12:28:35.143 回答
13
到目前为止，每个人都说过表应该只用于表格数据，这是真的。看看 SO 上任何页面的 HTML 源代码，你会发现他们有不同的想法......
我认为他们的理由是有时使用表格要简单得多。虽然，有很多非常好的可用性原因可以避免它们。
于 2008-09-17T12:16:00.663 回答
11
除了表格数据之外，不幸的是，如果您想以跨浏览器兼容的方式创建灵活的网格布局（例如复杂表单），表格仍然是必需的。
CSS2 支持在不使用table元素的情况下通过display 属性创建灵活的网格布局，但这在 IE6 或 IE7 中不受支持。
然而，对于大多数基本的表单布局，CSS 应该就足够了。
于 2008-09-17T12:19:30.390 回答
6
如果只有等效的 CSS 可以方便地设置“类似表格”的布局，那么我会喜欢使用 CSS。我发现模仿其他人在这里列出的东西（单元格的高度相等，自动生长的行等）所花费的时间根本不值得付出努力。在大多数情况下，我没有得到我的投资回报，而不是快速拼凑一张桌子。
所有浏览器都可以就表格的布局方式达成一致。巴姆。完毕。
下面是我的 CSS 蠢事通常是这样的：尝试在 CSS 中设置一个类似表格的布局。花 20 分钟或更长时间在 Mozilla 中获取所有内容，然后在 IE 中打开它。再花 30 分钟在这两个浏览器之间进行调整。假装世界上只有两个浏览器，因为我实际上需要完成一些工作。
我相信 CSS 的承诺：关注点分离。问题是，对于那些需要高效工作的人来说，CSS 还没有准备好迎接黄金时间。或者它可能是浏览器的渲染引擎——无论哪种。
于 2008-09-17T12:38:37.757 回答
4
CSS 的好处在于它将设计和布局与内容分开。
<TABLE>如果您有表格数据，那么使用标签是有意义的。如果你想布局不同的内容块，那么你应该使用<DIV>or<SPAN>和 CSS。
于 2008-09-17T12:12:30.580 回答
3
表格用于输出表格数据。您可能在电子表格中显示的任何内容，结果列，诸如此类。
使用 CSS 而不是表格的建议适用于列式布局，这并不是真正的表格。它从来没有打算建议应该完全删除表。
于 2008-09-17T12:12:19.893 回答
3
表格在 CSS2 中没有等价物，而且使用 css 复制它们也不是那么容易。表中难以重现的特定部分是列的自动调整大小。虽然让 1 行在整个页面中增长到相同大小很容易，但下一行很难动态匹配列大小或每个单元格大小，事实上，如果不使用其他脚本语言，例如javascript、php 或其他。您可以使用最大和最小宽度，以及设置单元格大小的百分比或硬编码单元格宽度，但动态增长的单元格适用于 1 行，它下面的下一行将不匹配。
于 2008-09-17T12:18:34.607 回答
3
浏览这些答案，我没有看到一个现实世界的原因，即布局需要表格，那就是 html 电子邮件。
我在一家非常非常大的金融公司工作，我们每个月跟踪大约 600 个不同的工作......其中许多是多个电子邮件活动。
您不能将 css 用于任何邮件阅读器的布局。您可以使用一些与颜色、字体和大小相关的内联 CSS 规范，甚至行高也相当广泛，但对于布局，您必须使用表格作为所有主要和次要的电子邮件阅读器（Outlook 97/ 03、Entourage、MSN 等）阅读它们就好了。
当您的 td 没有指定高度/宽度时，表格的问题就会发挥作用，无论它们是否包含数据。因此，“损坏”的表格布局通常通过注意属性来修复，是的...... html 中的空格......是的，应该不重要的空格。
因此，如果您曾经为一家大公司/公司工作，或者您拥有一个非常大的客户，请准备好抛弃所有当前技术并戴上您的 html 礼帽！
于 2010-06-18T19:58:42.923 回答
2
我认为这完全取决于时间/努力。虽然纯粹主义者可能会说“仅将表格用于表格数据”，但我过去曾使用表格来简化跨浏览器布局。
对我来说，这是时间利用的问题。我可以把时间花在 CSS 上以使其正确，或者我可以把它扔在桌子上，花更少的时间在上面。我倾向于走这条路，直到一切顺利。一旦功能到位，我就回去润色 CSS/HTML。
于 2008-09-17T12:41:04.037 回答
2
我必须在这里使用表格方法。其原因简单归结为成本。直到一个得到很好支持的以 CSS 为中心的布局方法出现之前，我说的是宏观层面……而不是容器内的微观，试图将 CSS 定位硬塞进一个通用的布局方法是低效的。您必须从编写开发支票的人的角度来处理这个问题。
几年前，我与一家大型连锁酒店签订了开发和维护网站的合同。我们采用了表格驱动的布局；您的基本页眉、正文、带有左/右列的页脚。我们还将表格用于一些更精细的元素，例如非图形按钮。该连锁店的母公司维护自己的网站，并采用纯 CSS 方法进行布局。当 IE7 出现时，我们的网站运行良好，没有任何变化。母公司的网站一团糟。总体而言，他们总共花费了大约 1000 小时（在会议/开发/QA/推出之间）来解决问题。
当您获得开发站点的报酬时，您的部分责任是减轻未来风险并最大限度地降低未来开发成本，特别是如果这些成本不会为站点（您的产品）增加价值。
于 2008-09-17T13:42:07.430 回答
1
我对此非常简单和基本的看法是，表格是用于表格数据的 - 而不是将一个东西放在顶部或另一个元素旁边，因为你碰巧喜欢它在那里。
所以 - 如果你想显示一个数据表：这样做（用一个表）。如果要在页面上定位内容：使用 css。
于 2008-09-17T12:12:52.700 回答
1
我相信并希望使用表格进行布局的时代已经过去。简单地说：一张桌子就是一张桌子，别无其他。
我认为未来几年新的、类似的、激烈的话题是：我应该使用新的 CSS 功能显示：table、table-cell、table-row等进行布局吗？? :-)
于 2008-09-17T12:23:57.870 回答
1
我想你可能会有点困惑。CSS 是一种样式化 HTML 文档的方法，无论是表格元素还是“div”。
过去在 HTML 中使用表格来设计整个页面布局。经常看到多个嵌套表（通常由诸如 Dreamweaver 等所见即所得程序生成），这导致了维护方面的噩梦。
自从 CSS 样式表的引入和采用以来，现在只使用表格来存储表格数据是正确的。这意味着如果您的数据最自然地呈现为表格，请使用表格元素。您仍然可以使用 CSS 设置表格样式。
但是，我通常不赞成这种方法，因为它复制了现有的功能，可以使用元素来构建类似表格的结构。事实上有几个网站会为你生成这样的代码，但我手头没有链接。
还请记住，一些用户可能要么以纯文本模式查看，要么使用屏幕阅读器，这两者都可能会破坏页面（例如垂直而不是水平阅读列），因此正确使用表格。
高温高压
于 2008-09-17T12:26:51.433 回答
1
我认为出现这么多的原因是在创建结构和布局时使用 html 表格比 CSS 更容易理解。使用 CSS 更抽象，但有助于分离您的代码。
为了响应“结构”参数......根据定义，不使用 html 表格为数据提供结构，以便您将其识别为“表格”。无论是 CSS 还是 html，您都在控制数据的流动和布局。无论是表格还是其他...
如果 CSS 表格如此重要（而且我确信我的回答会引发某种激烈的战争），为什么 Visual Studio 中没有一种机制可以使用 CSS 创建布局？哦，你没有检查VS中的布局功能吗？是的，您可以直接从 Microsoft 获得表格。我不是在抱怨，只是指出如果它对世界其他地方同样重要，你会看到 MS 切换到 CSS。
在我看来，做最适合您的项目的事情。对于一页或两页的 web 项目，我仍然使用 html，因为它的作用是显而易见的。使用 CSS 更抽象，有些早上我只是没有喝那么多咖啡。HTML 表格可能会变得混乱、快速。CSS 需要更多时间才能变得凌乱，但也会如此。
于 2008-09-17T12:42:19.650 回答
1
虽然对于某些使用表格的布局一开始可能看起来更简单，但当维护时间到来时，使用 css 是有回报的。特别是如果您想更改某物的位置，或者如果您想在多个地方使用相同的布局。
恕我直言，仅在展示表格时才应使用表格。从不用于布局目的。
于 2008-09-17T13:42:43.983 回答
0
表格用于显示表格数据。没有什么要补充的了:-D
于 2008-09-17T12:10:57.137 回答
0
如果有理由以语义方式使用表格（例如用于显示表格数据），请使用表格。
只需不使用表格来进行布局。语义标记有很多搜索引擎和可访问性的好处。
于 2008-09-17T12:14:22.150 回答
0
大多数情况下，保留表以仅用于表格数据。有些布局问题用表格比其他任何东西都更容易解决。例如，垂直对齐和等高列。在栅栏的另一边，有一些复杂的数据表，我使用了浮动 div，因为表不符合要求。
像其他任何事情一样，为正确的工作使用正确的工具，有时最实用的工具并不是您认为的那样。也就是说，即使在我给出的示例中，我也很少使用表格进行布局，因为我不可避免地遇到了一些问题，这让我不得不用 CSS 来做。你的旅费可能会改变。
于 2008-09-17T12:22:08.810 回答
0
我也不喜欢使用表格来排列页面上的项目的想法。然而，这不应该成为一种宗教 - 桌子很糟糕。我遇到了一个示例，其中我有一个三列布局，并且需要中心列随内容一起增长。最后，最简单且适用于所有需要的浏览器的解决方案是使用表格。恕我直言 CSS 仍然有一些缺点，有时最好使用一些简单有效的东西，而不是盲目地坚持某个想法（“表格很糟糕......”）。
于 2008-09-17T12:33:50.123 回答
0
如果您的布局有点表格，您甚至可以将它们用于布局。我喜欢动态调整到浏览器窗口宽度的表格和单元格的功能。永远不要使用任何固定的宽度或高度，那只会把事情搞砸。
于 2008-09-17T12:34:36.720 回答
0
这简单。将您的网页视为纸上的真实页面。仅当您要在纸上绘制表格时，才应在网页上使用表格。
另一个提示是仅使用边框 > 0 的表格。这样，仅当您想要一个表格时才使用表格（而不是用于布局）。
于 2008-09-17T12:38:52.967 回答
0
@toddhd，提倡使用表格进行布局只是为了节省时间是一种逃避。如果时间是问题，那么您可以使用Blueprint CSS或960 Grid等框架快速创建没有表格的列式布局。
于 2008-09-19T17:50:11.223 回答
0
似乎取决于您开始设计时浏览器的能力。如果您从只有表格工作的时候开始，那么这就是您可能一直想要使用的东西，因为您知道这一点。或者，即使在浏览器已经先进到能够呈现 CSS 之后，你也喜欢使用它……
我只是不喜欢一遍又一遍地做同样的事情，因为它们很容易而且我知道怎么做。那很无聊。我宁愿学习新技术也不愿放弃一些东西，因为我不知道如何使用它，或者我认为我没有时间学习。
我不喜欢使用表格，我不理解它们，它们看起来很陌生和令人反感，但那是因为我从 2005 年开始。我也不使用设计程序来吐出模板，因为我更喜欢手工编码。
于 2009-09-16T19:29:11.850 回答
-1
我将假设您的问题实际上是 - “我应该避免使用 HTML 表格进行布局吗？” . 答案是：不。事实上，表格是专门用来控制布局的。使用表格来控制整个页面的布局的缺点是源文件很快变得难以手动理解和编辑。使用表格来控制整个布局的一个（可能的）优点是是否对跨浏览器兼容性和呈现有特定的关注。我更喜欢直接使用 HTML 源文件，对我来说，使用 CSS 比在整个布局中使用表格更容易。
于 2008-09-17T12:19:36.710 回答
-1
仅当您尝试显示表格数据时，表格才有意义，仅此而已。对于布局，您应该始终使用 DIV 并使用 CSS 定位。
于 2008-09-17T13:10:06.057 回答
-4
如果你需要使用一张桌子，你的布局可能很糟糕。给我看一个使用表格的精心设计的网站，我会给你看一千个不使用表格的网站。
很多人都在抛出“纯粹主义者”这个词。这是垃圾。你会在书中打印报纸副本吗？你会用 Excel 设计小册子吗？不？那么为什么要使用表格来显示非表格数据呢？
大多数时候，人们在放弃表格进行布局时所面临的困难是他们自己对 HTML/CSS/良好设计原则的无知的结果。虽然您可能会发现很难使多列布局在垂直方向上均匀延伸，但您可能会考虑尝试不同的方法。DIV 不是表。您可以使用宽边框、页面背景等制作人造栏。花一些时间实际学习做您打算做的事情，或者永远被视为没有任何有用技能的人。（http://www.alistapart.com将是一个好的开始）
老实说，我很惊讶这个问题在 2008 年出现。DIV 是在我上高中的时候出现的。别再做菜鸟了。
如上所述，表格在移动设备和屏幕阅读器上很难运行。
于 2009-10-21T16:57:05.483 回答