HTML scan table: design

Question

I am trying to find a better way to create an HTML drill-down table in terms of tags. It should 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 really needed to do something similar for the client. As already noted, you are allowed to have several tbody and thead tags that you want to use to logically group your data. thead in this case will be a "connector".

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

It simplified, but you understood this idea. The structure becomes more organized and you can do much more with js.

I created jsFiddle using the approach I used in my project.