I have to do a table like this one:
+-------+-------+-------+-------+-------+-------+
| th 1 | th 2 | th 3 | th 4 |
+-------+-------+-------+-------+-------+-------+
| | | | td 1 | td 2 | td 3 |
| | | th 7 +-------+-------+-------+
| | | | td 4 | td 5 | td 6 |
| | th 6 +-------+-------+-------+-------+
| | | | td 7 | td 8 | td 9 |
| | | th 8 +-------+-------+-------+
| | | | td 10 | td 11 | td 12 |
| th 5 +-------+-------+-------+-------+-------+
| | | | td 13 | td 14 | td 15 |
| | | th 10 +-------+-------+-------+
| | | | td 16 | td 17 | td 18 |
| | th 9 +-------+-------+-------+-------+
| | | | td 19 | td 20 | td 21 |
| | | th 11 +-------+-------+-------+
| | | | td 22 | td 23 | td 24 |
+-------+-------+-------+-------+-------+-------+
The way I'm doing it right now is
<table>
<thead>
<tr>
<th colspan="3">th 1</th>
<th>th 2</th>
<th>th 3</th>
<th>th 4</th>
</tr>
</thead>
<tbody>
<tr>
<th rowspan="8">th 5</th>
<th rowspan="4">th 6</th>
<th rowspan="2">th 7</th>
<td>td 1</td>
<td>td 2</td>
<td>td 3</td>
</tr>
<tr>
<td>td 4</td>
<td>td 5</td>
<td>td 6</td>
</tr>
<tr>
<th rowspan="2">th 8</th>
<td>td 7</td>
<td>td 8</td>
<td>td 9</td>
</tr>
<tr>
<td>td 10</td>
<td>td 11</td>
<td>td 12</td>
</tr>
<tr>
<th rowspan="4">th 9</th>
<th rowspan="2">th 10</th>
<td>td 13</td>
<td>td 14</td>
<td>td 15</td>
</tr>
<tr>
<td>td 16</td>
<td>td 17</td>
<td>td 18</td>
</tr>
<tr>
<th rowspan="2">th 11</th>
<td>td 19</td>
<td>td 20</td>
<td>td 21</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
<td>24</td>
</tr>
</tbody>
</table>
What I want to know is if there is another, cleaner way to construct the same structure, like having the td in tr differents than the same in which the th are constructed to have them separated.
I created a jsfiddle if anyone knows a better way to do it. http://jsfiddle.net/mkhuete/ehX7X/1/
