Align images using table - html

Question

How would I go about aligning four images (two square images and two rectangular images) using a table? Should look something like this: http://imgur.com/a/PdbZq
<table>
<tr>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
</tr>
<tr>
<td colspan="2">
<img src="http://i.imgur.com/SXEsKuc.png" />
</td>
<td>
<img src="http://i.imgur.com/B8jHVoB.png" />
</td>
</tr>
</table>

Answer 1

Doesn't make much sense to use a table for what you want does it? A table has equal size cells in an entire column - which is exactly what you don't want. One CSS solution:
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/B8jHVoB.png" />
<img src="http://i.imgur.com/SXEsKuc.png" />
</div>
<div style="white-space:nowrap;">
<img src="http://i.imgur.com/SXEsKuc.png" />
<img src="http://i.imgur.com/B8jHVoB.png" />
</div>
Almost forgot: don't use an inline style, set a class to hold a row of images, with the white-space: no-wrap as an attribute.