html - 表格 v. div/css 布局——快速、简单、可靠？说服我

Question

就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the help center 寻求指导。




10年前关闭。




我知道这个话题已经快要死了，答案是非常明确的“div/css”(你这个傻瓜!)我发誓我想要做得很好并严格使用div，但认真的表格给了我快速可靠的布局解决方案少数案件。

让我感到难过的是，这些东西使用 css 很难，但使用表格却很容易？我该怎么办？我的替代方案是什么？

情况 1:必须在一定宽度上均匀分布(例如 100%)

我的客户想要一个 100% 的水平菜单，并且在该宽度上均匀分布，他们可以自己添加或删除元素(即我并不总是在那里为他们获得合适的间距)——这是一个 通用设计 ，我真的可以在这里替代 table 吗？

100%
<-------------------------------------------------------------------------->
div/css:
------------------------------------------------------------
| menu item | super long menu item | menu item | menu item |
------------------------------------------------------------
table:
----------------------------------------------------------------------------
|   menu item   |   super long menu item   |   menu item   |   menu item   |
----------------------------------------------------------------------------

注意，这是 而不是 float: left <li> 会起作用的情况，因为间距都是错误的。这个问题是关于动态确定元素的宽度(不会发疯或必须使用 js 或两者兼而有之)。

案例 2:可靠的液柱(100% 高度)

div/css:50 行 -- 从 Internet (pagecolumn.com) 的液体 2 列生成器中剪切/粘贴
http://dpaste.com/hold/579540/

表:40 行
http://dpaste.com/hold/579538/

也许只有我一个人，但桌面版本看起来更理智——就像它没有那么奇怪的包装 Action 。

我知道表格版本在 99% 的情况下都不会失败(如果浏览器决定更改其对边距/填充的解释，它永远不会，即使在最疯狂的浏览器上也不会执行弹出式以下技巧)。

我知道即使浏览器窗口宽度小于 250 像素，这两列也会显示。

Blow-for-blow 为什么在这种情况下我会选择 css 解决方案？

还有更多(例如vertical-align，这只是一个便宜的镜头)，但归结为我正在寻找的答案是:

在我的脑海中，当我坐下来创建一个新网站并考虑这些事情时，div/css 的论点不够强大也不够可靠。我想走那条路，但我的直觉说从长远来看会有龙。

表格是可靠的布局。我觉得我在交易劣质产品。 float 、z-index 和位置虽然非常有趣和有趣，但对于在现实世界中使用 IE 的客户来说，它并不像是真正的生产网站的主力军。

告诉我放弃表将如何使我的生产/设计过程的其他部分更加稳固和容易。

给我一些实用的非深奥的好处。

我正在认真地尝试改变我的思维方式，但我肩上的 table 上恶魔似乎每次都为我赢得了这场讨论。帮我stackoverflow。

Answer 1

如果您需要像素完美的 IE6/7 支持，那很好:对于上面列出的情况，使用表格更容易。

但是，在 IE8+ 和所有现代浏览器中，you have display: table ，这主要解决了没有all the downsides的问题实际使用表。

例如:How to make children auto fit parent's width only with CSS?

因为 IE6/7 不是那么重要(它们的市场份额是 rapidly dropping )，我会使用 display: table-cell 来解决上面的问题。 , 并且仅对 IE6/7 使用 JavaScript/jQuery 后备。