0

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.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Bob
  • 19
  • 2
  • 2
    "Tables are reliable for layout. I feel like I'm trading in for an inferior product." That's like a 16 year old saying "I'm not trading in my bike for a car, are you crazy?!" because he hasn't learned to drive yet. – Jeremy Wiggins Jul 27 '11 at 12:01
  • possible duplicate of [Why not use tables for layout in HTML?](http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html) – heisenberg Jul 27 '11 at 12:03
  • kekekela reading that question inspired me to write this one. You see my dilemma? I read that and basically got no answer. No one seemed to be giving the kind of answer I was interested in, which is why I focused on detailed examples rather than the conceptual stuff that question focuses around. – Bob Jul 27 '11 at 12:08
  • @Jeremy Wiggins giving that response is to me like saying "using a truck? why are you using a truck to move stuff around when you can be using a car?" ... please I'm giving precise contrasts of features that are being taken away, if that's not the definition of inferior what is. Be constructive. – Bob Jul 27 '11 at 12:12
  • 1
    Then basically what you are saying is that you've heard the arguments and weren't convinced, it doesn't warrant a retread of a topic that has already been thoroughly addressed here imo. – heisenberg Jul 27 '11 at 12:13
  • @kekekela If being unsatisfied with an answer isn't a good enough reason to re-ask it, why does SO even exist? Why doesn't everyone just use emacs? or macs? I'm unsatisfied with the responses in the question that you mentioned and am looking for different perspectives. – Bob Jul 27 '11 at 12:16
  • 1
    I voted to close with "Exact Duplicate" selected as the reason, triggering the automated comment. That's pretty much it, if you think you should be able to ask duplicate questions because the one with 400+ upvotes wasn't answered to your liking I'd take it up on meta. – heisenberg Jul 27 '11 at 12:20

2 Answers2

0

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.

Community
  • 1
  • 1
thirtydot
  • 224,678
  • 48
  • 389
  • 349
0

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.

Rob
  • 14,746
  • 28
  • 47
  • 65