CSS table-like style

Question

I want to create the following table-like element in my page:

I used to do it using <table>...<table> tags , but now I am switching all my sites to CSS and I'm using DIVs and such. I would like to know what is the "best" way to achieve this kind of an element (is it still the <table> tag?). I don't want to create just 3 columns and separate Items in the same column with <BR /> since I would like to control the spacing between elements in the same column (such as between Item1 and Item4).

Thanks!!

Joel

Answer 1

use display:table, display:table-row, display:table-cell

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

<div id="table">
  <div class="row">
    <div class="cell">Item 1</div>
    <div class="cell">Item 2</div>
    <div class="cell">Item 3</div>
  </div>
  <div class="row">
    <div class="cell">Item 4</div>
    <div class="cell">Item 5</div>
    <div class="cell">Item 6</div>
  </div>
  <div class="row">
    <div class="cell">Item 7</div>
    <div class="cell">Item 8</div>
    <div class="cell">Item 9</div>
  </div>
</div>

Live example http://jsbin.com/awagu4

...but I suggest you to use table html tag if you need a table. For this reason exist, and then you can modify it with css. In any case both solutions have the same result.