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.