HTML drilldown table: Design

Question

I\'m trying to figure out the best way to construct a HTML drilldown table in terms of tags. It needs to be simple but most important it should be logical.

Is there any

Answer 1

I actually had to do something similar for a client. As noted, you're allowed to have multiple tbody and thead tags which is what you would use to logically group your data. The thead in this case would be the 'connector'.

<table>
  <thead>
    <tr>Summary Row
  <tbody>
    <tr>Dropdown Rows / Data
  <thead>
    <tr>Summary Row
  <tbody>
    <tr>Dropdown Rows / Data

It's simplified but you get the idea. The structure becomes more organized and you can do much more with it with js.

I created a jsFiddle with the approach I used on my project.