I see where your coming from, but I disagree and believe a list of products could still be tabular data. I mean, you’ve got a column for price, description, item name etc, tabular + you can sort by these. Lists can pretty much be applied anywhere, and in this situation are perhaps overkill?

In fact, I think your html is very bad. Look at the markup without styling; there is no association between an items quantity, name and price…they are all separate lists. In a table you would still be able to make out association between items.

@ Mike Jolley, some great points but I must disagree, you could say a website layout is tabular data or any element can be made up of columns and rows. I agree on the sorting.

overkill = probably, but after looking at most ecommerce shopping carts and baskets if this can inspire to think a little more semantically its a good thing, lets be honest most shopping carts don’t even use the right tags for a tabular layout, captions etc.

@ Mike Jolley, I think the markup is different, each list heading is attached in meaning to its list, so theres an association there.

Ok, to win a losing battle I will suggest this = I think the list method will better prepare us for HTML 5.

With association i mean this, you basically have:

Product
Product
Product

Quantity
Quantity
Quantity

Cost
Cost
Cost

Now how is that a good way to view the data? How do I know (easily) which cost, quantity, applied to which product? Counting down? Not good..

The heading of the first list is Product, the list items for that list contain products. So the heading represents the following list, I know its unconventional.

I get that part, what Im saying is that each list is unrelated.

Say someone is using a screen reader browsing a product catalog of 100 items, and they see an item about 57 items down. How can they easily find the price? They would have to go to another list and count 57 down. ouch. In a table the cost would be in the same row and they would be related.

Another good point, but, concentrating on semantics I do think that a shopping cart is a list of products, therefore, whether we have the best tags for the job or not, the most meaningful markup for this is a list.

I think a list is just as justified as a table for this use.

Don’t edit my comments :p
–
The product list can be represented as tabular data; it is still semantic and probably has more meaning than a list of values.

Don’t fall into the trap of avoiding tables 100%, they have their uses.

Sorry, I did add “Tables” as Mike’s middle name, very immature I know

Sorry to jump in late, but I felt compelled to support Mike’s earlier comments. The shopping cart “list”, with its products, quantities, and costs, is practically the definition of tabular data.

I applaud your willingness to question the status quo, but in this case, a table is the most semantically correct way of presenting the data.

It’s logical to think of the shopping cart as a “list” of items. However, the need to present quantity and cost values as well has led you to suggest 3 separate lists, with no clear association between them. The only clue that the item #1 in the product list is associated with item #1 in the quantity list is provided visually by the CSS – literally the opposite of separating content and presentation.

It may be possible to mark up the shopping cart semantically as a list, using nested lists or something similar. You still wouldn’t have a simple way to provide semantically correct column headings, a la the table headings you’d use with a table.

It seems to me that the best you could hope for is to reimplement the much-maligned table using divs and lists, and all you’d really gain from the exercise is avoiding the table tag. Tables have their place – tabular data – and that’s exactly what the shopping cart in your example is.

Sorry Anthony but I agree with Mike on this one.

Tables should be used for tabular data and in this situation I’d say that using a list is as bad (if not worse) than using tables for layout.

There is no way that using this method a screen reader or mobile phone user (without CSS) would be able to use this shopping basket and therefore it is inaccessible.

Try adding 10 items to your shopping basket, switch CSS off and then work out the price and quantity of each item without counting down through each unrelated list.

This isn’t a dig at your CSS abilities as they are obviously very good but not using tables when they are most appropriate is just plain wrong.

@ Kevin, If I wrote the list down on a piece of paper would you say its a list of products or would you say its tabular data? Most people would say its a list.

This is because we don’t speak in an electronic format.

I think in terms of speaking to web browsers your right though.

@Dave Woods, I don’t condone this type of hacking for the sake of hacking but to make complex tables accessible to screen readers we use tabindex, we could use tab index to make the list tab properly too.

Again, Its just a bad suggestion.

Is a table a “list” of data?

A table could be called a list of data but because of the association between columns and rows it becomes more than a list and that’s why in this case a table should be used.

A better way of contructing this to your method would be to list your items as…

product
quantity
price

product
quantity
price etc…

as that would still maintain the relationshop within each product… but I’d still personally use table for this

I think a table would be preferable, to properly associate the data. If using lists, though, I would suggest you make the simplify using a single list with sub-lists under each heading, like so.

<ul id="products">
<li><h2>Product</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li><h2>QTY</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</li>
</ul>


There’s another reason as well, especially as it concerns accessibility: user expectations. Other shops use tables, as I believe they should, the only thing most need to attend to is using associated headers and ID attributes.

@Mike Cherim, The nested list definitely adds more of a association, actually Mike Jolley suggested that straight away, and I agree with both of you.

Its a great point about user expectations, we must remember that users are used to things happening a certain way and therefore are pre-programmed to expect certain functionality.

I think Mike C’s point is that users build up a thought pattern on how websites should work from every other website on the internet they visit.

A scary thought when most websites aren’t that readable or navigable.
(Text area is bigger now, thanks.)

From this discussion my main problem with the lists which has been highlighted (thanks all) is that the data doesn’t associate well and secondly for screen reader users you’d have to use tabindex to make the list tab through the data in the correct sequence – which I cant condone as I believe theres a natural tab index pattern and for screen reader or tab users consistency’s sake we should not mess with it.

It seems a shopping cart isn’t just a list of products, but a list of products, with related data rows and headings to make the data understandable.

I’ll continue to use a table tag for shopping carts. Thanks.

Well makes sense shopping cart is in actual fact a shopping list..

Can this also be achieved dynamically? like in ASP by just using the repeat function? I.e. for the product and price list

in this Case you mentioned i would preffer using table to be sortable.

i hope HTML5 makes our life easier!

Thanks,

This is an interesting discussion to carry on. Well i would keep it as Tabular Data rather than lists, I suppose its the way it has to be.

Guys, great battle fought above!
I derive from it that for the time being I am going Tabular Data way.
Cheers’

A valid point, but I think you might be mixing the idea of “Shopping list” with “Shopping cart” A cart is fundamentally different from a list, with a list being just that, a list of products, items etc.

A cart contains much more information, and so each “entry” in a list would need to have several units of information, something that is better expressed as a table of data.

Good article though, thought provoking!

Interesting point Robin and I hope I haven’t mixed the up

You go to the shop with a shopping list, you find the items and add them to your shopping cart / basket. The shopping list is usually a cognitive instruction in the ecommerce buying process.

Though i feel a shopping list is something ecommerce sites don’t cater to.

Also an interesting find is that;
From working in ecommerce I know that alot of users use the shopping cart as a shopping list, actually adding items just to see what extra tax etc will be added on, not intending to actually purchse the product.

This must be due to poor indication of inclusive taxes etc on the pricing.

Hi there,

I also see where you are coming from, not sure how much it would help SEO wise as I’m not sure google goes around filling out shopping carts etc but hey, you never know

diego

http://www.corporatewebsolutions.net

It seems to me that the best you could hope for is to reimplement the much-maligned table using divs and lists, and all you’d really gain from the exercise is avoiding the table tag.

Just my 2 cents

You know there is a lot of free carts on the net, we have made our own. Must carts that or off the self, sometime are hard to adapt to the payment gateway.

Allen

I am intrigued by the idea of a “list” of items for shopping purposes. But as Mike Jolley has pointed out, a list that basically looks like…

Product A
Product B
Product C

Cost A
Cost B
Cost C… etc.

… is a bit hard to read. Maybe if you had an inline list, such as…

Product A – Cost A
Product B – Cost B… etc.

… and I am aware this is the definition of tabular data but using an inline list can keep code cleaner and not full of s & s.

In my mind there is no doubt your are attempting to display tabular data, and therefore a table is the most semantically appropriate construct to use.

There is no SEO advantage to either approach. However there is an accessibility advantage to a well constructed table. Great resources include:
- http://www.usability.com.au/resources/tables.cfm
- http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

The focus should always be on what gives the best value to all your visitors. This quote is something I try to keep in mind – “Search engines are blind, deaf, mobility impaired users with scripting and plugins turned off.” [http://weblog.200ok.com.au/2005/06/search-engine-optimisation-is-new.html]