Развернутая таблица HTML: Дизайн

Question

Я пытаюсь найти наилучший способ построения HTML-таблицы с точки зрения тегов.Это должно быть просто, но самое главное, это должно быть логично.

Есть ли какой-либо предпочтительный стандарт, как это сделать?Что бы вы порекомендовали?

Одним из возможных решений будет ' 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>

другим решением будет ' 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

Я действительно должен был сделать нечто подобное для клиента.Как уже отмечалось, вам разрешено иметь несколько тегов tbody и thead, которые вы бы использовали для логической группировки ваших данных.thead в этом случае будет «соединителем».

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

Это упрощено, но вы поймете идею.Структура становится более организованной, и вы можете сделать с ней гораздо больше с помощью js.

Я создал jsFiddle с подходом, который я использовал в своем проекте.