I am working on an HTML newsletter and I am trying to get the coded black row that say Bar, to be attached to the row beneath containing images. The problem is that my black row does not contain separate white spaces and it does not connect to that row. Here is my code for this segment.
<table border="0" cellpadding="0" cellspacing="5" width="100%">
<tbody>
<tr>
<td width="190" bgcolor="#000000">Bar</td>
<td width="190" bgcolor="#000000">Bar</td>
<td width="190" bgcolor="#000000">Bar</td>
<tr>
<td width="190" height="100" >
<img src="/Users/Desktop/90snostalgia.jpg" alt="" width="190" height="130"/>
</td>
<td width="190" height="100">
<img src="/Users/Desktop/90snostalgia.jpg" alt="" width="190" height="130"/>
</td>
<td width="190" height="100" >
<img src="/Users/Desktop/90snostalgia.jpg" alt="" width="190" height="130"/>
</td>
</tr>
</tbody>
</table>
Adding something like this to your CSS should get you there, if I understand you correctly.
* { color:#fff } /** not needed. just couldn't see your fonts **/
table { width:572px }
tr td { border-left:1px solid white; padding:5px }
tr td:first-child { border-left: none }
Change the cellspacing on your table tag... Cellspacing="0"...
<table border="0" cellpadding="0" cellspacing="0" width="100%">
it is because of the cellspacing. Try to invert the cellspacing and cellpadding like this :
<table border="0" cellpadding="5" cellspacing="0" width="100%">
Related
I'm working on HTML email template.
I created it with a few nested tables.
I found that there are spaces to the right of the images in Outlook.
So I tried to fix this, but it doesn't fix.
Finally I create a simple template depending on colored images which I create to make it possible identifying the table cells.
Here's my code (Please copy it and test on Outlook):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>HTML Email Design Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style media="all" type="text/css">
table td {
border-collapse: collapse;
}
img { padding: 0; margin: 0; display:block;}
</style>
</head>
<body style="margin: 0; padding: 0;" bgcolor="#cccccc">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<table bgcolor="#ffffff" align="center" border="0" cellpadding="0" cellspacing="0" width="600" height="600" style="border-collapse: collapse; border: 1px solid #000000;">
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
First Row
</td>
</tr>
<tr>
<td>
<table width="600" height="600" border="0" cellpadding="0" cellspacing="0" bgcolor="#08336d">
<tr>
<td width="300" height="600">
<img src="http://2a-web.com/email/test/images/img-01.jpg" width="300px" height="600px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="300" height="600">
<table width="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="300" height="300">
<img src="http://2a-web.com/email/test/images/img-02.jpg" width="300px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="300" height="300">
<table width="300" height="300" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="300">
<img src="http://2a-web.com/email/test/images/img-03.jpg" width="150px" height="300px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="150" height="300" bgcolor="#ffc33c">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="150" height="150">
<img src="http://2a-web.com/email/test/images/img-04.jpg" width="150px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
<tr>
<td width="150" height="150" bgcolor="#16b512">
<table width="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-05.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
<td width="75" height="150">
<img src="http://2a-web.com/email/test/images/img-06.jpg" width="75px" height="150px" border="0" style="display:block; line-height:0; font-size:0;"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td align="center" style="padding: 40px 0 40px 0; font-size: 26px; font-weight: bold; font-family: Arial, sans-serif;">
Third Row
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
So, how can I remove the gap between cells ?
I'm appreciating your help.
After taking a look and testing in outlook with your provided HTML, I believe I know what you are experiencing, and it has to due with images.
First off, all the images in your HTML are not available so I had to test with my own images. These is where, I noticed the issue. My images were causing to email to expand beyond the specified width of 600. This is because for outlook if you are going to use width and height attributes for a element, you leave off the px part, it's assumed. I.E. 150 NOT 150px. As soon as I did everything snapped into place, no spacing issue.
I was only able to reproduce the vertical spacing/gapping on the right of the images after I forced one of the bottom images to have an exaggerated width, i.e. it's currently set to 150(same as the containing td), so I set it to 155. And bam! Got the spacing.
Meaning that your table layout/css is fine for the most part, outlook is probably freaking out because you are adding the px part. Either remove it or set the width/height with inline styling instead.
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 am experience a gap between the header and the body only in Outlook 2013. Below is a screen-shot to hot it looks in outlook:
Here is what it should look like:
My header HTML code:
<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
</td>
<td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
<td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
<td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
<table cellspacing="0" cellpadding="0" width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;" border="0" height="51">
<tr>
<td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
</tr>
</table>
<!-- end header -->
This will probably help:
http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells
Basically, it's a padding issue with outlook - and it's related to font sizing. That's quite an old problem from waaaay back in the day of table based website layouts and the old tricks of setting font size to 1px, or using nasty old 1x1px transparent gif files :)
Use this in your stylesheet
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
And inline for each table declare
table border="0" cellpadding="0" cellspacing="0"
To get the 1 pixel white space between each cell use nested tables. and declare the table like so
table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"
I have been working on this html for a while trying to figure out why outlook 2010 is adding this 1px white line between images that are hyperlinked.
I am pretty sure I have tried all the tricks I have read about Html emails and outlook. Below is the code/styling I am using for just 2 tables. They have 1 single image in each. If I remove the hyperlink, there is no space in outlook 2010. If I leave the hyperlink I can't find a way to get rid of the space!
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="179" >
<img border="0" align="left" alt="Gold Rush" height="179" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" style="height: 179px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" width="600">
<tr>
<td style="border-collapse: collapse;" width="600" height="25">
<img align="left" border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="height: 25px; width: 600px; margin: 0px; padding: 0px; display:block; float: left; border:0; vertical-align:bottom;" width="600" />
</td>
</tr>
</table>
Any and all ideas are welcome please!
Just a question of order with attributes, it seems... Try like this, it's ok for me! ;)
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td><img style="display:block;" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_01.jpg" height="179" width="600" alt="Gold Rush" border="0" /></td>
</tr>
<tr>
<td><img border="0" alt="Shop Gold" height="25" src="https://d2q0qd5iz04n9u.cloudfront.net/_ssl/proxy.php/http/gallery.mailchimp.com/5513172da1aa95c4b84fdedba/images/ESSETIAL6_FALL_02.1.jpg" style="display:block;" width="600" /></td>
</tr>
</table>
try removing the width='600px' from the <td>, so that it would take the width of the img
I have a single table HTML with 3 columns (25px : 580px : 25px) with white background throughout table, trs and tds. All works in every browser except Outlook 2010.
In Outlook 2010 I am receiving vertical gaps in the two outer columns between table rows - its about a 3px gap. It appears the background white is either not displaying throughout the cell or Outlook is adding in a line break or similar.
Screenshot here:
The structure of the affected rows is as:
<tr><td height="20" width="25" align="left" valign="top" bgcolor="#ffffff"></td>
<td height="20" width="580" align="left" valign="top" bgcolor="#ffffff"></td>
<td height="20" width="25" align="left" valign="top" bgcolor="#ffffff"></td>
</tr>
Anyone any ideas what causes this and how to resolve?
Possible solutions:
Set background-color: #ffffff with CSS
Add a in the affected tds and use CSS to set font-size: 0px and line-height: 0px
Try both of the above at the same time :)
Images should be set to inline display:block
Add into your embedded CSS:
table, table td { border:0; border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; margin:0; padding:0; }`
You should put your bgcolors in the tag instead of table-cells:
<table bgcolor="#ededed" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<table bgcolor="#ffffff"cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="20" width="25" align="left" valign="top"></td>
<td height="20" width="580" align="left" valign="top"></td>
<td height="20" width="25" align="left" valign="top" ></td>
</tr>
</table>
</td>
</tr>
</table>