Question

I am trying to learn CSS, especially I am trying to get away from tables, which are so easy to use.

I created jsfiddle to see what I have done:

http://jsfiddle.net/HMtSY/

I can’t align all data into proportional cells. Please assist

<div class="cartItem">
    <span class="cartProductTitle">Product</span> <span class="cartProductModel">
    Model</span> <span class="cartProductPrice">Price</span>
    <span class="cartProductQty">Qty</span> </div>
<div class="cartItem">
    <span class="cartProductTitle">This is the product title</span>
    <span class="cartProductModel">mdsdre12es</span>
    <span class="cartProductPrice">9.95</span> <span class="cartProductQty">1</span>
</div>
<div class="cartItem">
    <span class="cartProductTitle">Product 2</span>
    <span class="cartProductModel">mds12es</span> <span class="cartProductPrice">
    1119.95</span> <span class="cartProductQty">199</span> </div>
<div class="cartItem">
    <span class="cartProductTitle">This is the product title product 100000</span>
    <span class="cartProductModel">as</span> <span class="cartProductPrice">9.95</span>
    <span class="cartProductQty">22221</span> </div>

//CSS

.cartItem
{
    display: table-cell;    
    padding: 5px; 
    width: 600px;
    min-width: 600px;        
    float:left ; 
}
.cartProductTitle
{   
    display: table-cell;    
    padding: 5px; 
    width: 350px;
    min-width: 350px;
}
.cartProductModel
{   
    display: table-cell;    
    padding: 5px; 
    width: 150px;
    min-width: 150px;
}
.cartProductPrice
{   
    display: table-cell;    
    padding: 5px;    
    width: 30px;
    min-width: 30px;  
}
.cartProductQty
{   
    display: table-cell;    
    padding: 5px; 
    width: 30px;
    min-width: 30px;  
}

Answer 1

Not all tables are evil!

Tables for layout are, but this isn’t tables for layout, you’re displaying tabular data, as in, data which should be displayed with a table!

This means that using a table in your case is perfectly acceptable, and even the correct solution.

So yes, use a table in this case. It’s not layout, so it’s fine 🙂