Using tables or div/css for the basket/checkout pages in e-commerce site, please advise me

Question

I have to create a basket/checkout page for an E-commerce site. With all these debates regarding <table> , I'm confused.

Seeing that in a basket/checkout page, products are aligned in rows with their details and with some options like remove/edit, I'm inclined to use <table> but I was told to stay away from it and use <div>/css . I mean, basket/checkout pages are data about products so I don't see any problem.

So I'm asking, am I right to use <table> or should I use <div>/css for alignment of products? Again, I'm talking about basket/checkout page.

Answer 1

Tables can be used for tabular data. But it's really up to you in the long run. Using semantics isn't a law, or rule. It's just best practice. I would suggest, if you're showing a "list" of products with prices you could probably mark it up as a list. If you're showing a more "data-driven" page with numbers and information then you should probably use a table.

It's up to you in the long run :-)

Answer 2

You're right to use tables in this instance. If you have row upon row of information (or even just one) it makes perfect sense semantically, and more importantly, from a layout point of view to do this.

The alternative with would involve far too much CSS cludge to look the same, and would render your markup into a pile of classes and divs.

Answer 3

I know this is a really old question, but the truth of the matter is that none of these answers suffice. They haven't even gone into what their tabular data really is and all anyone can offer is a general rule of thumb unless you provide more details about your specific situation. (I know you won't because you're long over this case for your particular needs, but for anyone else coming here they will know to provide more detail.)

So what is tabular data? Well I think we can all agree tabular data is data, not design elements. Data is something you would find in an excel sheet or in your database. So when deciding if your page contains tabular data, you decide if you have data or design elements. For example, does you checkout table have a remove button? Would you data about your remove button in an excel spreadsheet? Probably not.

The way I look at it, is if all the "data" you're presenting is considered tabular data, then why not make your product pages on your site a big table? People would frown. So consider this when you look at your "tabular data." Just because it looks like a table, is formatted similar to a way a table would look, doesn't necessarily mean you have tabular data. Options for shipping, subscriptions, etc, might go in a table for user accounts. So you may be fine.

Answer 4

The general rule i stick to is:

Div's for layout

---

Table's for tabular data

---

You won't go far wrong with this rule :)