CODEWITHSUNDEEP
htmlhtml-table
user3274696
user3274696

Reputation: 89

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

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!

Upvotes: 0

Views: 38

Answers (1)

roberrrt-s
roberrrt-s

Reputation: 8210

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>

Upvotes: 2

Related Questions