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 preferred standard on how to do this? What would you recommend?

One possible solution would be 'colspan'.

<tbody>
<tr><td> + </td><td>Summery row 1</td><td>Summery row 1</td></tr>
<tr><td> + </td><td>Summery row 2</td><td>Summery row 2</td></tr>
<tr style=hidden><td colspan=3>drilldown data goes here...</td></tr>
</tbody>

another solution would be 'tbody':

<tbody>
<tr><td> + </td><td>Summery row 1</td><td>Summery row 1</td></tr>
<tr><td> + </td><td>Summery row 2</td><td>Summery row 2</td></tr>
</tbody>
<tbody id=DrilldownDataOfRow2 style=hidden>
<tr><td></td><td>drilldown data goes here...</td></tr>
</tbody>

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.