Another method would be to put a table inside the first table cell.
Put in the ...<td>
<table><tr><td>image 1</td><td>image 2</td>
</tr><tr>
<td>image 3</td><td>image 4</td>
</tr></table>
</td>...rest of table.
Make the second table have no cellspacing, cellpadding and no borders if it makes it look better.
You may also have to use valign="top" or "bottom" and align="right" to get them right into the corners.
------------------------
Using pure css you will need something like this:-
<table><tr><td>
<div style="width:?px;"> <!--total of width of left and right images (max of two rows)-->
<img style="float: left" src="image-top-left.jpg">
<img style="float: right" src="image-top-right.jpg">
<div style="clear: both; line-height:0; font-size:0;">divider div</div>
<img style="float: left" src="image-bottom-left.jpg">
<img style="float: right; margin-top:101px;" src="image-bottom-right.jpg">
</div>
</td>
<td>Right cell text</td>
</tr><tr>
<td>lower table cell left</td>
<td>lower table cell right</td>
</tr></table>
Add style="margin-top:?px;" to each image depending on whether it is higher or lower than its neighbour. In my example the bottom right image is 101px less high than its left neighbour so it needs the margin-top to put it in the right bottom corner.