表格 vs. div/css 布局——快速、简单、可靠？说服我
我知道这个话题已经快要完蛋了，答案是非常明确的“div/css”（你这个傻瓜！），我发誓我想做好并严格使用 div，但认真地说，表格给了我快速可靠< /em> 少数情况下的布局解决方案。
让我感到难过的是，这些事情使用 css 很难，但是使用表格却很容易？我该怎么办？我有什么选择？
情况 1：必须在一定宽度（例如 100%）上均匀分布
我的客户想要一个 100% 的水平菜单，并且在该宽度上均匀分布空间，这样他们就可以自己添加或删除项目（即我'我并不总是在那里为他们提供合适的间距）——这是一种常见设计，实际上我除了这里的桌子之外还有什么选择？
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
案例 2：可靠的液柱（100% 高度）
div/css：50 行 -- 从互联网 (pagecolumn.com) 的 Liquid 2 柱生成器剪切/粘贴
http://dpaste.com/hold/579540/
表格：40 行
http://dpaste.com/hold/579538/
也许只是我的问题，但表格版本看起来不错更加理智——就像它没有那么奇怪的包裹动作。
我知道表格版本在 99% 的情况下都不会出错（它永远不会永远，即使在最疯狂的浏览器上，如果浏览器决定更改其解释，也不会执行 pop-below 技巧边距/填充）。
我知道即使浏览器窗口宽度小于 250 像素，两列都会显示。
话说回来，为什么在这种情况下我会选择 css 解决方案呢？
还有更多（例如垂直对齐，这只是一个廉价的镜头），但它归结为我正在寻找的答案是这样的：
当我坐下来制作一个新网站并考虑这些事情时，我的脑海中div/css 论点不够强大，也不够可靠。我想走那条路，但我的直觉告诉我，从长远来看，会有龙。
表格的布局可靠。我觉得我正在换取劣质产品。浮动、z 索引和位置虽然非常有趣，但对于现实世界中使用 IE 的客户来说，它们并不像是真正的生产网站的主力。
告诉我放弃桌子将如何使我的生产/设计过程的其他部分变得更可靠、更容易。
给我一些实用的非深奥的好处。
我正在认真地尝试改变我的思维方式，但我肩上的桌子恶魔似乎每次都为我赢得了这场讨论。帮助我计算器。
I know this topic's been close to done to death and the answer is pretty unequivocally "div/css" (you fool!) and I swear I want to be good and strictly use divs, but seriously tables give me quick reliable layout solutions for a handful of cases.
It makes me sad that these things are so hard using css, but so easy with tables? What do I do? What are my alternatives?
case 1: must space evenly across certain width (eg 100%)
My client wants a horizontal menu that's 100% and spaces evenly across that width, where they have can add or remove items themselves (ie I'm not always going to be there to get the spacing right for them) -- this is a common design, really what is my alternative to a table here?
100%
<-------------------------------------------------------------------------->
div/css:
------------------------------------------------------------
| menu item | super long menu item | menu item | menu item |
------------------------------------------------------------
table:
----------------------------------------------------------------------------
| menu item | super long menu item | menu item | menu item |
----------------------------------------------------------------------------
NB this is not a case where float: left <li> will work as the spacing will be all wrong. This question is about determining the width of the element dynamically (without going mad or having to use js or both).
case 2: reliable liquid columns (with 100% height)
div/css: 50 lines -- cut/paste from a liquid 2 column generater from the internet (pagecolumn.com)
http://dpaste.com/hold/579540/
table: 40 lines
http://dpaste.com/hold/579538/
Maybe it's just me but the table version looks way more sane -- like it has less strange wrappy action.
I know the table version isn't going to bork in 99% of cases (it will never ever, not even on the most insane browser do the pop-below trick if the browser decides to change its interpretation of margins/paddings).
I know that both columns will show even if the browser window is <250px wide.
Blow-for-blow why would I choose the css solution in this case?
There were a couple more (like vertical-align which is just a cheap shot) but what it boils down to and the answer I'm looking for is this:
In my mind when I sit down to make a new website and consider these things the div/css argument is not strong nor reliable enough. I want to go that way but my instinct says that in the long term there-be-dragons.
Tables are reliable for layout. I feel like I'm trading in for an inferior product. Floats, z-indexes and positions whilst being really fun and interesting don't feel like work-horses for real production websites with nuffy IE-using clients in the real world.
Tell me how ditching tables will make some other part of my production/design process solid and easier.
Give me some practical non-esoteric benefits.
I'm seriously trying to change my way of thinking, and yet the tables-devil on my shoulder seems to win this discussion for me every time. Help me stackoverflow.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您需要像素完美 IE6/7 支持，那么很好：对于上面列出的情况，使用表格会更容易。
但是，在 IE8+ 和所有现代浏览器中，您有
display: table，这主要解决了问题，而没有实际使用的所有缺点表。例如： 如何制作孩子只用CSS自动适应父母的宽度？
因为IE6/7不是那么重要（他们的市场份额是快速下降），我将使用
解决上述问题display: table-cell，并仅针对 IE6/7 使用 JavaScript/jQuery 后备。If you need pixel perfect IE6/7 support, then fine: using tables is easier for the cases you've listed above.
However, in IE8+ and all modern browsers, you have
display: table, which mostly solves the problem without all the downsides of actually using tables.For example: How to make children auto fit parent's width only with CSS?
Because IE6/7 are not that important (and their market share is rapidly dropping), I would solve the question above by using
display: table-cell, and using a JavaScript/jQuery fallback for only IE6/7.表格是一个预定义的固定网格，您必须将内容放入其中，并且一旦存在，就无法轻松移动或更改（如果有的话），除非重新设计整个布局。
表格的许多部分都是使用浏览器自己的内置 CSS 样式表来设计样式的，因此说表格胜过 CSS 的说法是不正确的。
Tables are a pre-defined fixed grid you must fit your content into and, once there, cannot be moved or changed easily, if at all, without reworking the entire layout.
Many parts of tables are styled using the browsers own built-in CSS stylesheet so saying tables trumps CSS is not true.