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.


1 Answer 1


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.

  • 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, 2013 at 13:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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