Is it possible to alternate rows of rows?

Question

I suggest that this outline of what I'm trying to do will be more descriptive than the question itself.

+------------------------+-----------------------+ | | | + +-----------------------+ | | | +------------------------+ + | | | + +-----------------------+ | | | +------------------------+-----------------------+ | | | +------------------------+-----------------------+ 

As you can see, I am trying to create a table with two columns, where at some point it should be able to insert rows in one of the columns, and in the end, in the other in the next two rows.

Am I missing some obvious way to do this or some kind of extended table tag / attribute? Or is there simply no way to do this using tables?

I know that this can be achieved using other methods, but I'm interested in tables, and what is the question.

For reference: There are some things that I tried and did not succeed http://jsfiddle.net/dbtYk/

Answer 1

If I missed something, here is an example based on your jsfiddle

 <table> <tr style="height:20px;"> <td rowspan="2">left</td> <td>right</td> </tr> <tr style="height:20px;"> <td rowspan="2">right</td> </tr> <tr style="height:20px;"> <td rowspan="2">left</td> </tr> <tr style="height:20px;"> <td>right</td> </tr> <tr> <td>left</td> <td>right</td> </tr> </table> 

UPDATE

As stated in Cicada, this unfortunately does not work in Chrome.

UPDATE 2

As Alohchi noted, adding height does work in Chrome. The foregoing has been modified to reflect this, along with the new jsfiddle .

Answer 2

Of course it is possible: -)

 <table border="yes"> <tr> <td rowspan="2">1</td> <td>2</td> </tr> <tr> <td rowspan="2">3</td> </tr> <tr> <td rowspan="2">4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> <td>7</td> </tr> </table> 

Just skip the cells that are already covered by the stretched cells from the previous row.