CODEWITHSUNDEEP
html
user1487320
user1487320

Reputation: 21

Combine seperate images into a single image using HTML tags

I have 3 parts of images and I have to display it as single image and also want to include the links to the 3 parts of images using HTML tags.

I created the table with 1 column and 2 rows and I inserted the images into the 3 section of the table. But it have some spaces between the upper and the lower images (1st and 2nd row). How can resolve this problem and create a single graphic without any spaces and also need to include link into the 3rd image.

Need help urgently

<table style="width: 660px; border-collapse: collapse; height: 237px;" border="0" cellspacing="0" cellpadding="0" sizset="0" sizcache="15">
<tbody sizset="0" sizcache="15">
<tr>
<td><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/masthead-ball_top.jpg" width="665" height="197"></td>
</tr>
<tr>
<td><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/ball_bottom_left.jpg" width="579" height="37"><img style="margin: 0px; border: 0px currentColor;" src="uploaded/Online_Newsletters/Nav/ball_bottom_right.jpg" width="86" height="37"></td>
</tr>
</tbody>
</table>

I used the above code but still have space between the images. In my company website is managed using finalsite, so I am using the finalsite editor for this one.

Upvotes: 2

Views: 18508

Answers (2)

Zork
Zork

Reputation: 149

Along with the @Wolv3r answer, if you do not have

img {
   display:block;
}

Inlined or using style tags, this causes issues in gmail / yahoo.

Source for good html for emailing methods:

http://24ways.org/2009/rock-solid-html-emails/

Upvotes: 0

WolvDev
WolvDev

Reputation: 3226

Use cellpadding and cellspacing in your table tag:

<table cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">

and to use the 3rd image as link just use

<a href="http://www.example.com"><img src="yourimage.jpg" border="0" style="float:left;" /></a>

EDIT:

Add style="float:left;" to your img tags.

http://jsfiddle.net/H628X/1/

Upvotes: 1

Related Questions