Split an html row into multiple (sub) rows - html

Question

How can I split a row in a html table into multiple (sub) rows? (I don't mean to use rowspan to span multiple rows because I am using a rails gem called sync that is constrained to updating a single table row at a time).
For example, how can I create a single row in a table, that:
in column one, has a single row
in column two, is split into 2 sub rows
in column three, is split into 4 sub rows (row one from the previous column is split into 2 sub rows, and row 2 from the previous column is split into 2 sub rows).
This is just an example. I need to be able to dynamically decide the way the rows will be split at run time.
Edit: see below for structure as described in bullet points above (although note i'm trying to achieve this structure within a single table row, i.e. without using rowspan)
<table>
<tr>
<td rowspan=4>1</td>
<td rowspan=2>2</td>
<td >3</td>
</tr>
<tr>
<td >4</td>
</tr>
<tr>
<td rowspan=2>2</td>
<td >5</td>
</tr>
<tr>
<td >6</td>
</tr>
http://jsfiddle.net/40ukzvz1/

Answer 1

You could try nesting tables so that each table structure is not affected by the cell it sits in.
See code example:
<table width="100%" border bgcolor="red">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>
<table width="100%" border bgcolor="green">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
</td>
<td>
<table width="100%" border bgcolor="blue">
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
</td>
<td>
<table width="100%" border bgcolor="yellow">
<tr>
<td>1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>