User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am developing a web application for a client who operates a business that makes custom granite countertops. A quote comprises of several items. Each item has a number of sub-items. My problem is that I am trying to generate all of this in a table, and quite honestly, looks horrible. In it's present state, there is no way to really differentiate the sub items visually.

So I'm debating whether to use horizontal <ul> lists that have the main item attributes, then the sub-items in separate indented horizontal <ul> lists. I'm uncertain what's the best way. I have included an image of my initial attempt with tables.

In the image below "Kitchen Counters" and "Bar Area" are main items, "backsplash" and "Cutout Range" are sub items of the main item.


share|improve this question
up vote 2 down vote accepted

You just can make the items more distinct visually:

enter image description here

Items are bold-fonted and separated, sub-items are padded. Qty are better right-aligned.

share|improve this answer
good point. looks good. I usually left align the first td element regardless of data type. but what you have looks great – ctilley79 Jul 5 '13 at 13:34

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.