Question

I have something like below. Book name (can be variable length, got from an ajax call), price, and quantity. Is there a way I can align each field using CSS instead of using a table to do that? Thanks.

e.g. HTML output:

Emacs Handbook $10 1
Web Development In 10 Days $20 2
Car $8 3

I want:

Emacs Handbook             $10   1
Web Development In 10 Days $20   2
Car                        $8    1

Answer 1

There’s nothing wrong with using tables. If it’s tabular data (ie something one would expect in an excel spreadsheet or a database table), it still belongs in a table.

If you must insist, you could put each of those in a span inside a list item and then style them:

HTML:

<ul class="productList">
    <li>
        <span class="title">Emacs Handbook</span> 
        <span class="price">$50</span> 
        <span class="qty">3</span
    </li>
</ul>

CSS:

.productList span { display:inline-block;}
.productList .title { width:250px;}
.productList .price { width:50px;}
.productList .qty { width: 50px; }