Question

I have a HTML+CSS grid layout as in this screenshot, which is essentially a column-oriented table (vs. the row-oriented HTML <table>, which is constructed row-by-row).

To achieve this layout, I have the backing grid constructed from <div>s, and the value groups as right-floating <table>s. Originally, I had the value groups as <div>s as well, but that requires fixed cell widths (esp. with cells spanning multiple columns), so now I’m using tables for the value groups. Either way though, I’m able to have a variable number of value groups, which I need.

What I’d like to do is use a <table> for the backing grid as well, so I can get all of the nice row-spanning and column-spanning for free. However, this has proven to be a difficult task, because the table element is treated as a single block in flow (elements cannot flow around it).

So my question is this: Could I possibly use a table for the “backing grid” in my layout, using only HTML + CSS? Also, feel free to suggest different approaches for the construction of this layout altogether.

edit:

I should have mentioned that this layout is to be generated dynamically, and it follows that single-table solution won’t work. This is because, in this case, the items are static, but the value groups are not. I need to be able to easily add/remove value groups, so that this can be generated using a template engine such as {{mustache}}. With a single-table solution, in order to add a value group, every <tr> must have an additional set of <td>‘s added, which is definitely non-trivial when using any templating engine, but especially with {{mustache}}, which is what I’m using.

For example, my source data (in JSON) might look like:

{
   "oneTwoTotal": "$0.00",
   "valueGroups":[
      {
         "groupName":"ValueGroup1",
         "values":[
            {
               "subgroupName":"Column 1",
               "item1":"$0.00",
               "item2":"$0.00",
               "item3":"$0.00",
               "total":"$0.00"
            },
            {
               "subgroupName":"Column 2",
               "item1":"$0.00",
               "item2":"$0.00",
               "item3":"$0.00",
               "total":"$0.00"
            }
         ]
      },
      {
         "groupName":"ValueGroup2",
         "values":[
            {
               "subgroupName":"Column 1",
               "item1":"$0.00",
               "item2":"$0.00",
               "item3":"$0.00",
               "total":"$0.00"
            },
            {
               "subgroupName":"Column 2",
               "item1":"$0.00",
               "item2":"$0.00",
               "item3":"$0.00",
               "total":"$0.00"
            }
         ]
      }
   ]
}

Imagine constructing the single-table solution with a templating engine, using this data.

Answer 1

Here’s what I ended up doing: http://fiddle.jshell.net/gGaXj/30/ . At the top level, I have a container div with position: relative. Inside the container is a backing table, and another div with position: absolute with right: 0; top: 0; (positioned over the container) containing my right-floating value group tables. With this solution, I have the ease of using tables with rowspan/colspan, and the ease & speed of iterating over value-groups only once to add them to the layout. Plus, it’s cross/legacy browser compatible, where a div + CSS table wouldn’t be as much.