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.