Hacker News Reader

Comment by briansmith | Hacker News Reader

Ask yourself these two questions:

1. Does this layout require display: table/table-row/table-cell?

2. Do I want this to work in IE6 and IE7?

If the answers are "yes" and "yes" then you have to use a table, because that is the only way to get display: table functionality in IE6 and IE7.

If either answer is "no" then using something other than tables is probably best. If you are starting from scratch then you should probably do whatever will get you a prototype faster. If you've already laid out the page using a table, then add an issue "redo layout without using tables" in your issue tracker and prioritize it against your other issues.

View on HN

Can you identify some layouts that require display: table/table-row/table-cell? They solve some problems with CSS, but those problems (insofar as I've experienced) only come up when working with designs that specifically target the shortcomings of CSS' other display modes (e.g. your shorter secondary column has a background that needs to extend the length of the primary column); or that have layout idiosyncrasies so unconventional that a designer would either need to be familiar with how to implement them to even propose them, or be actively malicious (e.g. uh... like a variable height container that sits at the bottom of a secondary column alongside a longer primary column, I think?).

But "yes" to fast prototypes.

Many times when you want to constrain an element's size and/or alignment based on the size/alignment of elements above/below and beside it, you need to use table layout. Consider a simple layout from a site I will be launching very soon (not to scale):

       BBBB
    A  BBBB
       BBBB
  CCCCCDDDDEEEEE
  CCCCCDDDDEEEEE
       FFFF
       FFFF
       FFFF

You want A to be vertically centered with B and horizontally centered with C. You can't give a fixed width or a fixed height to anything because the layout needs to be fluid. I don't see how to do it without using table layout.

If some dimensions of some elements can be fixed (e.g. the width of A and C), or if some alignments are changed to make thinks convenient (e.g. align the bottom of A with the bottom of B), of if approximate alignment is good enough, then often nested block/inline-block and some positioning fu can be used instead of tables. But, sometimes the automatic table layout algorithm is exactly what the layout needs.

Reply on news.ycombinator.com