CSS table-like style

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开发者_StackOverflow社区 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

---

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.

---

you can achive the same effect with using unordered list nested in a div element

<div class="wrapper">
    <ul class="itemHolder">
        <li><div>item1</div></li>
        <li><div>item2</div></li>
        <li><div>item3</div></li>
        <li><div>item4</div></li>
        <li><div>item5</div></li>
        <li><div>item6</div></li>
        <li><div>item7</div></li>
        <li><div>item8</div></li>
        <li><div>item9</div></li>
    </ul>
</div>

this would be your css

.wrapper{
    width:600px;
}
.itemHolder{
    margin:0;
    padding:0;
}

.itemHolder li{
    float:left;
    margin-bottom:10px;
}
.itemHolder li div{
    width:200px;
}

you can see it live here

---

Using tables for creating your layout is usually frowned upon. Using divs alongside CSS for tabular data is also frowned upon. The best way - as asked by your question - is to use tables on this occasion.

Unless of course the items represented in your image is not tabulated data, but containers/boxes which in turn will hold respective data. In which case I would probably recommend CSS.

---

You can also achieve this with a flexbox.

.items {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

This will generate a responsive table like structure.

---

with list style set to none and some use of float you can make a similar result to tables. there's this link: http://mindrulers.blogspot.com/2008/03/create-table-using-css.html and here is it in action: http://www.jsfiddle.net/pJgyu/3247/

---

I personally prefer using a design-grid, when doing layouts.

At the moment, I would recommend this "framework": http://960.gs/ The name 960 is because its a design that has 960 pixels width, so that it is viewable on most computers which has minimum 1024 pixels in width. 960 is a great number for dividing into columns etc. but have a look at the website for further info.

---

In addressing which method you should use:

If this is purely a layout issue and the items have no semantic relation issue I would use as your container, row and item elements. In which case use something like Sotiris' answer.

If your items are semantically related then look at who they are related. If they are semantically in groups, i.e. a table use a table, particularly if there would be a title for each column. If it is just generally a group of related items, use a list structure like cac's answer (thoguh it'd probably lose the inner divs).

There are also some interesting variations on the list approach.

By removing the wrapper, or the width from the wrapper in Cac's answer you can create a layout that adjusts it self to different browser width, so for wider screens you'll get less rows of elements as you will get more elements in the row.

Also don't ignore the definition list, if that is a better semantic option to an unordered list.

---

Flex box is suitable for this.

ul {
    display: flex;
    flex-flow: row wrap; 
}

li {
     flex-basis: 40%; 
} 

<ul> 
    <li> item 1</li> 
    <li> item 2</li> 
    <li> item 3 </li> 
    <li> item 4 </li> 
</ul>