Tables v. div/css layout -- quick, easy, reliable? Convince me [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. Closed 11 years ago.

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.

---

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.

---

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.