divs vs. tables, part II – the compromise (maybe?)

<div class=’tablesque’>
   <div class=’rowesque’>
      <div class=’cellish’>A</div>
      <div class=’cellish’>B</div>
   </div>
   <div class=’rowesque’>
      <div class=’cellish’>C</div>
      <div class=’cellish’>D</div>
   </div>
</div>

stylesheet:
.tablesque { display: table; }
.rowesque { display: table-row; }
.cellish { display: table-cell; }

There – it looks like a table, because you told it to look like a table in the CSS. But the markup doesn’t say it’s a table – it just says you have a hierarchy.

I sorta fell into this idea because I’m working on making a web application work for iphone or for a regular browser, and in the plain browser context I wanted something to be a table, but on the iphone, I wanted it to act more like spans and divs.

To give you an idea of what a moron I am, you should know my first idea was to have a big table, and on the iphone, do things like: display: block, display: inline, etc. But the iPhone (and even Safari on the desktop) had problems with letting me convince it to display tables as non-tables. So finally I switched it to divs, and made the regular browser side do display: table, display: table-row, display: table-cell. And that seems to work okay for now.

So, standards people, there, I’m standardy. My ‘layout-like-a-table’ CSS is all in the CSS. I think this CSS looks a hell of a lot prettier than the crazy ‘float, clear, width, etc’ routines. And it should stretch better based on its contents รก la tables.

As a bonus, within the table DOM stuff I don’t have mysterious invisible ‘tbody’ tags that chuck themselves in my table. I lost 3 or 4 hours to that a while ago.

2 thoughts on “divs vs. tables, part II – the compromise (maybe?)”

  1. This actually helps me ALOT, because I need to have a print stylesheet that has a table like layout and a screen stylesheet that displays something more linear. This is perfect.

  2. I don’t get it. Was the “big table” displaying tabular data? or was it just for layout?

    Your CSS is just using the part of the standard for CSS tables, no?

    I am confident that this will all be explained when we work together tomorrow.

Leave a Reply

Your email address will not be published.