Question

Guys I am a programmer and when I need to add something that looks like a table in the eye and use html tables, I always get smacked by my fellow web designers. How can I construct a common html div structure for divs so I can just have it and always copy paste the html when ever I need something that looks like a table?

So in the case of this table html structure

<table>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
 <tr><td></td><td></td></tr>
</table>

what is the similar div structure?

Answer 1

You’ll want to use the display table, table-row, and table-cell:

CSS:

.table
{
   display:table;
}

.table-row
{
   display:table-row;
}

.table-cell
{
   display:table-cell;
}

HTML:

<div class="table">
   <div class="table-row">
      <div class="table-cell">1</div>
      <div class="table-cell">2</div>
   </div>
   <div class="table-row">
      <div class="table-cell">3</div>
      <div class="table-cell">4</div>
   </div>
</div>

Demo

Note that the table, table-row, and table-cell display values aren’t supported in IE7 or below and IE8 needs a !DOCTYPE.

Also, tables should be used for representing tabular data since it gives the markup more semantic meaning over a bunch of div’s with classes. You just shouldn’t use tables for layout purposes.