Non-Standard Free Width Height HTML Table - css

Question

I'm trying to get an HTML markup that represents the following table layout:
I tried this but it's not working:
<table border="1">
<tr>
<td style="height: 800px">
1
</td>
<td style="width: 300px; height: 400px">
2
</td>
</tr>
<tr>
<td style="height: 200px">
<p>3</p>
</td>
<td style="height: 600px">
4
</td>
</tr>
</table>

Answer 1

This looks pretty close to the image you provided. It's a little tricky because it actually requires 3 rows, but once you get your head wrapped around rowspan, then it makes sense.
<table border="1">
<tr style="height: 200px;">
<td style="width: 400px;" rowspan="2">
1
</td>
<td style="width: 200px;">
2
</td>
</tr>
<tr style="height: 200px;">
<td rowspan="2">
4
</td>
</tr>
<tr style="height: 50px;">
<td>
<p>3</p>
</td>
</tr>
</table>

Answer 2

You just need to add another row and add rowspans:
<table border="1">
<tr>
<td style="width: 300px; height: 400px" rowspan="2">
1
</td>
<td style="width: 300px; height: 200px">
2
</td>
</tr>
<tr>
<td style="height: 200px" rowspan="2">
4
</td>
</tr>
<tr>
<td style="height: 100px">
3
</td>
</tr>
</table>
See jsfiddle: http://jsfiddle.net/mt009cha/
EDIT
Do you have to use tables? This seems more like a layout and divs might be more appropriate.
Html:
<div class="container">
<div class="left">
<div style="height: 498px">1</div>
<div style="height: 98px">3</div>
</div>
<div class="right">
<div style="height: 298px">2</div>
<div style="height: 298px">4</div>
</div>
</div>
CSS:
div {
border: 1px solid black;
}
.container {
width: 600px;
height: 600px;
}
.left {
width: 398px;
height: 100%;
float: left;
}
.right {
width: 198px;
height: 100%;
float: right;
}
See jsfiddle: http://jsfiddle.net/zynt5j7e/

Answer 3

FIDDL
If you must use tables:
<table class="tbl">
<tr>
<td>
<table>
<tr>
<td style="height: 800px">
<p>top left</p>
</td>
</tr>
<tr>
<td style="height: 200px">
<p>bottom left</p>
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td style="height: 400px">
<p>top left</p>
</td>
</tr>
<tr>
<td style="height: 600px">
<p>bottom left</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
Some CSS:
.tbl, .tbl table { border-collapse: collapse; width:100%; }
.tbl td, .tbl table td{ border:1px solid black; padding:0; margin: 0; }