I've tried several options to do this, but none have worked. Just trying to remove the padding around the images and tighten up the table. I'm thinking there must be some inline style I can use, but I'm too much of a novice to figure this out just yet. Any help would be greatly appreciated.
Here is the html generated from photoshop.
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/BOEM-Logo.jpg" alt="http://www.boem.gov/" width="297" height="115" border="0" /></td>
<td colspan="2"> <img src="http://oceanleadership.org/wp-content/uploads/JASCO-Logo.jpg" alt="http://www.jasco.com/" width="273" height="115" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/CSA-Ocean-Sciences-Inc.-Logo.jpg" alt="https://www.csaocean.com/" width="152" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/IFAW-Logo.jpg" alt="http://www.ifaw.org/united-states" width="145" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/MBARI-Logo.jpg" alt="http://www.mbari.org/" width="125" height="96" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Schmidt-Ocean-Institute-Logo.jpg" alt="https://schmidtocean.org/" width="148" height="96" border="0" /></td>
</tr>
<tr>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Teledyne-Marine-Logo.jpg" alt="http://www.teledynemarine.com/SitePages/HomePage.aspx" width="152" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Ocean-Sonics-Logo.png" alt="http://oceansonics.com/" width="145" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/L3-Maripro-Logo.jpg" alt="http://www.l-3mps.com/maripro/" width="125" height="80" border="0" /></td>
<td> <img src="http://oceanleadership.org/wp-content/uploads/Sea-Bird-Scientific-Logo.png" alt="https://sea-birdscientific.com/" width="148" height="80" border="0" /></td>
</tr>
</tbody>
</table>
<br />
Using an inline style isn't a great idea, but including the attribute style='padding: 0px, margin: 0px' inline in your img tags would ensure the browser isn't rendering any extra space around the images themselves. A better option would be to include a .css file with the rule:
td img {
padding: 0px;
margin: 0px
}
That rule should automatically assign the styling to all img tags within your table.
Its Problem with Image I removed your style still its having white space its because of your images.
You can see below
your code
<table id="Table_01" class=" alignleft" style="height: 291px" border="0" width="570" cellspacing="0" cellpadding="0">
I removed this style and tried here
Demo
Related
I am trying to do the following design
So my outer table will have 2 table rows.
The first table row will have 3 td's which will each contain their own inner table (tables represented by colour shading in the design).
So my first table rows tds look like this
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image1.jpg" alt="" width="186" height="20" border="0" style="display: block;"></td>
</tr>
<tr>
<td><img src="image4.jpg" alt="" width="34" height="66" border="0" style="display: block;"></td>
<td><img src="image5.jpg" alt="" width="120" height="66" border="0" style="display: block;"></td>
<td><img src="image6.jpg" alt="" width="32" height="66" border="0" style="display: block;"></td>
</tr>
<tr>
<td colspan="3"><img src="image12.jpg" alt="" width="186" height="20" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3"><img src="image2.jpg" alt="" width="67" height="106" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4"><img src="image3.jpg" alt="" width="397" height="26" border="0" style="display: block;"></td>
</tr>
<tr>
<td><img src="image7.jpg" alt="" width="178" height="25" border="0" style="display: block;"></td>
<td><img src="image8.jpg" alt="" width="83" height="25" border="0" style="display: block;"></td>
<td><img src="image9.jpg" alt="" width="15" height="25" border="0" style="display: block;"></td>
<td><img src="image10.jpg" alt="" width="121" height="25" border="0" style="display: block;"></td>
</tr>
<tr>
<td colspan="4"><img src="image11.jpg" alt="" width="397" height="55" border="0" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
Now everything looks fine, just how it should do. I am not too sure if I have done the colspans correctly though?
Anyways, moving onto the second table row, I have the following
<table width="650" border="0" cellpadding="0" cellspacing="0" align="center">
<tr>
//first table row data
</tr>
<tr>
<td colspan="4">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image13.jpg" alt="" width="33" height="122" border="0" style="display: block;"></td>
<td><img src="image14.jpg" alt="" width="255" height="122" border="0" style="display: block;"></td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="image15.jpg" alt="" width="362" height="122" border="0" style="display: block;"></td>
</tr>
</table>
</td>
</tr>
</table>
As soon as I add the second row, my design messes up. Essentially, I end up with my design looking something like the following
How can I avoid this from happening? I think it may be to do with my colspans, not too sure though.
Thanks
A couple huge things..
Where is this appearing? Outlook I presume, what version(s)?
define inline widths and max-width for each element where width is a concern, do it inline within table HTML. Maintain outer table wrapping all elements within. If main outer table element is ignored. Nest a few tables as wrappers until elements are contained to desired layout. Use CSS but do it inline.
Read this article.
just want to ask, having a code like this:
<table border="0">
<tbody>
<tr>
<td><img style="border: 0px none;" src="img/image.jpg" alt="" width="250" height="250" border="0" /></td>
</tr>
<tr>
<td><img style="border: 0px none;" src="img/image.jpg" alt="" width="300" height="300" border="0" /></td>
</tr>
</tbody>
</table>
this should look like an image on the upper row, and another image on the lower one.
In outlook, those two rows are having a large gap in between and I don't know what's causing this.
This table is inside a td with another table.
Try this
HTML
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="line-height:0; padding:0"><img style="border: 0px none; vertical-align:top" src="img/image.jpg" alt="" width="250" height="250" border="0" vspace="0" hspace="0" /></td>
</tr>
<tr>
<td style="line-height:0; padding:0"><img style="border: 0px none; vertical-align:top" src="img/image.jpg" alt="" width="300" height="300" border="0" vspace="0" hspace="0" /></td>
</tr>
</tbody>
</table>
I am trying to create an email template like following. I have used table. I am able to do everything except the image is not displayed at proper position. The images should be displayed in middle and on top of the container(see screen 1), but I am not able accomplished it. I have tried to provide negative margin to container, but gmail and other mail services are ignoring the negative margin.
Here's what I was able to accomplishd till so far.
The code is present here. Can anyone please help with this?
Updated answer:
You can't use negative margin in html email. To mimic this, there are 2 ways to do it, the nested tables way and the more complex rowspan way:
<!-- The nested way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="80" bgcolor="#007700">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
<td width="100" height="80" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="80" bgcolor="#FFFFFF">
<table width="100%" height="80" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td height="40" bgcolor="#CCCCCC">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
<br><br>
<!-- The fancy rowspan way -->
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC"><!-- coloring the whole table instead of just the cells you want, will stop gaps forming on forwarding from Outlook -->
<tr>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
<td width="100" height="80" rowspan="2" bgcolor="#4444FF">
<img alt="" src="" width="100" height="80" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="200" height="40" bgcolor="#FFFFFF">
</td>
</tr>
<tr>
<td width="200" height="40">
</td>
<td width="200" height="40">
</td>
</tr>
<tr>
<td width="500" height="200" colspan="3">
</td>
</tr>
</table>
Original answer:
For basic positioning:
Horizontally, use align="left|center|right", vertically use valign="top|middle|bottom"
Here is how to place an image center top of a table:
<table width="500" border="0" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td height="500" align="center" valign="top">
<img alt="" src="" width="100" height="100" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
</table>
As I said:
If it was me i would make the top border and the image a row. – Alex
Thomas 23 mins ago
Change you top row to:
<td valign="bottom">
<b style="border-top-left-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-right:none;"> </b>
</td>
<td class="text-center" width="64">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png"> </td>
<td valign="bottom">
<b style="border-top-right-radius:5px; background-color:#fff; display:block; border:3px solid #a3a9ac; border-bottom:0; height:100%; margin:0; padding-bottom:20px; border-left:none;"> </b>
</td>
check out the result - http://jsfiddle.net/562ux.
I've not tested this in a email Client, but as #Kheema Pandey says, you should try to use inline styles.
It is a good practice to use inline style while creating newsletter. Also outlook doesn't support margin negative property.
in your case the image is not appear center so you can use a inline style here 'style="text-align:center;"'.
<td style="text-align:center;">
<img class="top-image" src="https://cdn1.iconfinder.com/data/icons/WPZOOM_Social_Networking_Icon_Set/64/gmail.png" />
</td>
I haven't had to send any mailshots for a number of years and I remember the process to be very painful then.
I have cut up my design into three sections and placed them within a table the table has a height and width defined and so do all the individual elements, however when viewed in an email client such as Gmail there are spaces between the three table rows.
My html. I think you'll agree it couldn't be more simplified!
<table border="0" cellpadding="0" cellspacing="0" width="550" height="550">
<tr>
<td colspan="2" bgcolor="#ffffff" width="550" height="104">
<img src="images/OC_01.gif" alt="" width="550" height="104"></td>
</tr><tr>
<td bgcolor="#ffffff" width="246" height="341">
<img src="images/OC_02.gif" alt="" width="246" height="341"></td>
<td bgcolor="#ffffff" width="304" height="341">
<img src="images/OC_03.gif" alt="" width="304" height="341"></td>
</tr><tr>
<td colspan="2" bgcolor="#014280" width="550" height="105" valign="top">
<img src="images/OC_04.gif" alt="" width="550" height="105"></td>
</tr>
</table>
Is there anyone here today that has enough email html experience to point me in the right direction?
Edit to add: I have been dissecting some commercial emails that have been sent to me in the past and I have found that some of them also have this weird spacing issue in Gmail. I have also noticed that each has been designed in such a way as to accommodate any extra spacing between the rows so I'm going to assume that the answer to this question is to ensure that the design is produced in such a way that these gaps are not an issue.
You must include style="display:block" with all images to prevent the gap issue in various email clients.
Example:
<img src="http://www.website.com/images/kitty.jpg" alt="Picture of Kitty"
width="1000" height="1000"
style="border:none; margin:0px; padding:0px; **display:block;**"/>
Add following attribute to the IMG element:
style="display: block;"
I've added it for you http://jsfiddle.net/xE9Qr/
Default IMG display is inline-block which produces unwanted space after.
I've tested it using http://ctrlq.org/html-mail/ and the spaces between TR elements are gone now. Remeber to see the result you have to send HTML table layout email to your gMail account.
Adding align="top" to images seems to be a potential fix:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" bgcolor="#ffffff">
<img src="images/OC_01.gif" alt="" width="550" height="104" align="top"/>
</td>
</tr>
<tr>
<td bgcolor="#ffffff" width="246">
<img src="images/OC_02.gif" alt="" width="246" height="341" align="top" />
</td>
<td>
<img src="images/OC_03.gif" alt="" width="304" height="341" align="top" />
</td>
</tr>
<tr>
<td colspan="2" bgcolor="#014280">
<img src="images/OC_04.gif" alt="" width="550" height="105" align="top" /></td>
</tr>
</table>
I have a couple of images inside of a table (it's for an email so I've had to use tables) that are not aligning even once I have used cellpadding=0. Any ideas?
<table>
<tbody>
<tr>
<td cellpadding="0" colspan="5"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_01.gif" alt="" width="444" height="43" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_02.gif" alt="" width="46" height="252" /></td>
<td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/boxes.gif" alt="" width="296" height="142" /></td>
<td cellpadding="0" rowspan="4"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_04.gif" alt="" width="102" height="252" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" colspan="3"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_05.gif" alt="" width="296" height="33" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_06.gif" alt="" width="32" height="77" /></td>
<td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/greeting.gif" alt="" width="151" height="29" /></td>
<td cellpadding="0" rowspan="2"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_08.gif" alt="" width="113" height="77" /></td>
</tr>
<tr cellpadding="0">
<td cellpadding="0"><img src="http://www.tradetech.net/images/Holidayemail/tt_holiday_boat_23_09.gif" alt="" width="151" height="48" /></td>
</tr>
</tbody>
</table>
cellpadding="0" belongs inside the <table> tag, not the <td> tag or the <tr> tag.
Cellpadding does not do anything on the tag as stated above, since you are creating a HTML e-mail you need to set the width on the tags to not allow any room to move around. Just adding images doesn't help.
I've created a fiddle where the images in your layout line up perfectly: http://jsfiddle.net/Scopestyle/6Qva2/
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<table width="444" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"><img style="display: block;" src="http://placehold.it/444x43" alt="" width="444" height="43" /></td>
</tr>
<tr>
<td width="46" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/46x252" alt="" width="46" height="252" /></td>
<td width="296"><img style="display: block;" src="http://placehold.it/296x142" alt="" width="296" height="142" /></td>
<td width="102" rowspan="3" valign="top"><img style="display: block;" src="http://placehold.it/102x252" alt="" width="102" height="252" /></td>
</tr>
<tr>
<td><img style="display: block;" src="http://placehold.it/296x33" alt="" width="296" height="33" /></td>
</tr>
<tr>
<td width="296" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="32" rowspan="2"><img style="display: block;" src="http://placehold.it/32x77" alt="" width="32" height="77" /></td>
<td width="151"><img style="display: block;" src="http://placehold.it/151x29" alt="" width="151" height="29" /></td>
<td width="113" rowspan="2"><img style="display: block;" src="http://placehold.it/113x77" alt="" width="113" height="77" /></td>
</tr>
<tr>
<td width="151"><img style="display: block;" src="http://placehold.it/151x48" alt="" width="151" height="48" /></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
If you look at the code notice a few tricks I've used to make it work:
The HTML is nested in tables. This makes complicated cell layouts easier to manage and less likely to break.
All cells have the width of the images, so we don't allow gaps between the cells.
The images have inline styles with the display: block; attribute. This neutralizes any gaps below the image that could occur in different browsers and e-mail clients.
When testing your e-mail code, putsmail.com is a handy tool to see what it looks like in your inbox. When debugging different e-mail clients take a look at emailology.org for interesting tips.
wow I can't even imagine what you're trying to do but to remove most of the spacing add this to the <table> tag:
<table cellpadding="0" cellspacing="0" border="0">