Products in shopping cart - list vs table
Hi
What element should be used to describe product list in shopping cart?
It seems obvious that list should be coded with list element but I can see that in most cases table element is used for this purpose in e-commerce projects.
Shopping cart usually contains list of products with many additional data like amount of product (in a form of input where one can increase the amount of one product) costs, taxes, discounts... and below total cost of all products.
It looks like tabular data that's probably why table approach is often prefered.
Let me describe my case: I have to create such a list that might contain single product, product that has i.e. extended warranty period (that is treated as a single product attached to the main product), product that contains other products (set of products, bundle). I find it difficult to decide which approach should I use to create correct markup that could describe this kind of content in the right way.
List seems easier for styling but not for describing content. However, nested list for products that are attached to main product seems like a good solution:
HTML Code:
<ul>
<li>
Product 1
<span class="amount"><input type="text" name="amount" /></span>
<span class="cost">$100</span>
<span class="discount">20%</span>
<span class="final-cost">$80</span>
<span class="del"><a href="#">delete</a></span>
</li>
<li>
Product 2 - set
<span class="amount"><input type="text" name="amount" /></span>
<span class="cost">$100</span>
<span class="discount">20%</span>
<span class="final-cost">$80</span>
<span class="del"><a href="#">delete</a></span>
<ul>
<li>
Product 2-1
<span class="amount"><input type="text" name="amount" /></span>
<span class="cost">$100</span>
<span class="discount">20%</span>
<span class="final-cost">$80</span>
<span class="del"><a href="#">delete</a></span>
</li>
<li>
Product 2-2
<span class="amount"><input type="text" name="amount" /></span>
<span class="cost">$100</span>
<span class="discount">20%</span>
<span class="final-cost">$80</span>
<span class="del"><a href="#">delete</a></span>
</li>
</ul>
</li>
</ul>
How about table:
HTML Code:
<table>
<thead>
<tr>
<th scope="col">Picture</th>
<th scope="col">Product name</th>
<th scope="col">Amount/th>
<th scope="col">Cost</th>
<th scope="col">Discount</th>
<th scope="col">Final cost</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="#" alt="" /></td>
<td>Product 1</td>
<td><input type="text" name="amount" /></td>
<td>$100</td>
<td>20%</td>
<td>$80</td>
<td><a href="#">delete</a></td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>Product 2</td>
<td><input type="text" name="amount" /></td>
<td>$100</td>
<td>20%</td>
<td>$80</td>
<td><a href="#">delete</a></td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>Product 2-1</td>
<td><input type="text" name="amount" /></td>
<td>$100</td>
<td>20%</td>
<td>$80</td>
<td><a href="#">delete</a></td>
</tr>
<tr>
<td><img src="#" alt="" /></td>
<td>Product 2-2</td>
<td><input type="text" name="amount" /></td>
<td>$100</td>
<td>20%</td>
<td>$80</td>
<td><a href="#">delete</a></td>
</tr>
</tbody>
</table>
However I see one main problem here: all products are describe the same no matter if it's one single product or set of products attached to main product. I bet screen readers won't read it correctly.
Styling table is also not a pleasant task i.e. background color, border and border-radius for one row. That would probably mean additional markup for each td to style it like this. UL is easier here.
What do you think about it? I feel I should go with table approach but also feel that it should be better solved than what I proposed above. Can you help with any suggestions
