Why aren't the images in my HTML table aligning properly? - html

Question

I'm currently building an email signature, a simple 4 images sectioned off in a square 2x2 table.
The problem I'm currently facing is I can't remove the spacing between the td's at the moment.
<style>
d, tr, img { padding: 0px; margin: 0px; border: none; display: block; }
table { border-collapse: collapse; }
</style>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="http://bubblei.co.uk/NDz2UL.png" ></img>
</td>
<td>
<img src="http://bubblei.co.uk/BMSIqd.png"></img>
</td>
</tr>
<td>
<img src="http://bubblei.co.uk/VcOrDE.png" ></img>
</td>
<td>
<img src="http://bubblei.co.uk/DlwKjq.png"></img>
</td>
</tr>
</table>
Can anyone tell me where I'm going wrong, or point me in the right direction? much appreciated!

Answer 1

Your images all have different size. I've taken the liberty to smoothly change one of them, and the result is already way better. You should align them and honer the same dimensions on all images.
<style>
d, tr, img { padding: 0px; margin: 0px; border: none; display: block; }
table { border-collapse: collapse; }
</style>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<img src="http://i.imgur.com/tBrf7Fu.png" >
</td>
<td>
<img src="http://bubblei.co.uk/BMSIqd.png">
</td>
</tr>
<td>
<img src="http://bubblei.co.uk/VcOrDE.png" >
</td>
<td>
<img src="http://bubblei.co.uk/DlwKjq.png">
</td>
</tr>
</table>