I have a table that has the first row with a column span of 3 and the next row with 3 columns holding images. I have tried several forms of wrapping and CSS and cannot get the email to load correctly.
here is my code i have modified and the original i started with. What am I doing wrong?
modified so far
<html>
<head>
<style>
body{width: 100%; height: auto; background-color: #edebf1}
<!--table{width: 100%; height: auto}-->
<!--img{width: 100%!important; height: auto!important;}-->
img{border:none; width: 100% !important;height:auto; line- height:100%; outline:none;}
.ExternalClass{width:100%; height: auto;}
table {width: 100%; height: auto; border-collapse:separate;}
td{cellpadding:0px; border-spacing:0px;}
tr{cellpadding:0px; border-spacing:0px;}
</style>
<title>Webinar Invite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!--[if mso]>
<table cellpadding="0" cellspacing="0" border="0" style="padding:0px;margin:0px;width:100%;">
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
<tr>
<td style="padding:0px;margin:0px;"> </td>
<td style="padding:0px;margin:0px;" width="560">
<![endif]-->
<table id="Table_01" width="8412" height="4183" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Webinar-Invite2_01.png" width="8412" height="2619" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Webinar-Invite2_02.png" width="3971" height="1564" alt=""></td>
<td>
<a href="Webinar address" target="_Blank"
onmouseover="window.status='Registration for Webinar'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Webinar-Invite2_03.png" width="2042" height="1564" border="0" alt=""></a></td>
<td>
<img src="images/Webinar-Invite2_04.png" width="2399" height="1564" alt=""></td>
</tr>
</table>
<!--[if mso]>
</td>
<td style="padding:0px;margin:0px;"> </td>
</tr>
<tr><td colspan="3" style="padding:0px;margin:0px;font-size:20px;height:20px;" height="20"> </td></tr>
</table>
<![endif]-->
</body>
</html>
Original
<html>
<head>
<style>
body{width: 100%; height: auto; background-color: #edebf1}
table{width: 100%; height: auto}
img{width: 100%; height: auto}
</style>
<title>Webinar Invite2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table id="Table_01" width="8412" height="4183" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/Webinar-Invite2_01.png" width="8412" height="2619" alt=""></td>
</tr>
<tr>
<td>
<img src="images/Webinar-Invite2_02.png" width="3971" height="1564" alt=""></td>
<td>
<a href="webinar address" target="_Blank"
onmouseover="window.status='Registration for Webinar'; return true;"
onmouseout="window.status=''; return true;">
<img src="images/Webinar-Invite2_03.png" width="2042" height="1564" border="0" alt=""></a></td>
<td>
<img src="images/Webinar-Invite2_04.png" width="2399" height="1564" alt=""></td>
</tr>
</table>
</body>
</html>
I run your code, you could replace your code with the below code:
<html>
<head>
<style>
body{width: 100%; height: auto; background-color: white; margin:0;}
/* img{border:none; width: 100% !important;height:auto; line-height:100%; outline:none; display:inline-block} */
.ExternalClass{width:100%; height: auto;}
td{cellpadding:0px; border-spacing:0px;width:20px;height:20px;border: 1px solid #666666;}
tr{cellpadding:0px; border-spacing:0px;}
#Table_01{
width:200px;
height:200px;
border:0;
border-collapse:separate;
border: 1px solid #000000;
}
.tab_img{
width:20px;
height:20px;
display:inline-block;
}
.tsb_img1{
border:0;
}
</style>
<title>Webinar Invite</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<table id="Table_01" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="" class="tab_img" alt=""></td>
</tr>
<tr>
<td>
<img src="" class="tab_img" alt=""></td>
<td>
<a href="" target="_Blank"
onmouseover="window.status='Registration for Webinar'; return true;"
onmouseout="window.status=''; return true;">
<img src=" " class="tab_img " alt=""></a></td>
<td>
<img src="" class="tab_img" alt=""></td>
</tr>
</table>
</body>
</html>
This is my c# code:
static void Main(string[] args)
{
string stringHtmlBodyfromFile = File.ReadAllText(HTML file path);
Outlook.Application objOutlook = new Outlook.Application();
Outlook.MailItem mailItem = (Outlook.MailItem)(objOutlook.CreateItem(Outlook.OlItemType.olMailItem));
mailItem.To = "";
mailItem.Subject = "hi";
mailItem.HTMLBody = stringHtmlBodyfromFile;
Console.WriteLine(stringHtmlBodyfromFile);
mailItem.Display();
}
This is my result:
Related
I have a problem.
I'm using Node.JS nodemailer.
const url = `${url}`;
var mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: 'Please click this email to confirm your email: ${url}`'
};
The HTML is quite long. So I would have to link each line with
'Line1' +
'Line2' +
and unfortunately the uplines are shown an error see: align = 'center'
Is there a way to embed this HTML file simply and easily?
And if I can include the file separately I have created a variable and this should then be displayed in HTML. How would that work?
Can I somehow embed the file differently than directly in the code? I appreciate help!
This is my html
<!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>[SUBJECT]</title>
<style type="text/css">
body {
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
margin:0 !important;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
.tableContent img {
border: 0 !important;
display: block !important;
outline: none !important;
}
a{
color:#382F2E;
}
p, h1{
color:#382F2E;
margin:0;
}
p{
text-align:left;
color:#999999;
font-size:14px;
font-weight:normal;
line-height:19px;
}
a.link1{
color:#382F2E;
}
a.link2{
font-size:16px;
text-decoration:none;
color:#ffffff;
}
h2{
text-align:left;
color:#222222;
font-size:19px;
font-weight:normal;
}
div,p,ul,h1{
margin:0;
}
.bgBody{
background: #ffffff;
}
.bgItem{
background: #ffffff;
}
#media only screen and (max-width:480px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
td[class="left_pad"]
{
padding-left:15px !important;
padding-right:15px !important;
}
}
#media only screen and (max-width:540px)
{
table[class="MainContainer"], td[class="cell"]
{
width: 100% !important;
height:auto !important;
}
td[class="specbundle"]
{
width:100% !important;
float:left !important;
font-size:13px !important;
line-height:17px !important;
display:block !important;
padding-bottom:15px !important;
}
td[class="spechide"]
{
display:none !important;
}
img[class="banner"]
{
width: 100% !important;
height: auto !important;
}
.font {
font-size:18px !important;
line-height:22px !important;
}
.font1 {
font-size:18px !important;
line-height:22px !important;
}
}
</style>
<script type="colorScheme" class="swatch active">
{
"name":"Default",
"bgBody":"ffffff",
"link":"382F2E",
"color":"999999",
"bgItem":"ffffff",
"title":"222222"
}
</script>
</head>
<body paddingwidth="0" paddingheight="0" style="padding-top: 0; padding-bottom: 0; padding-top: 0; padding-bottom: 0; background-repeat: repeat; width: 100% !important; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; -webkit-font-smoothing: antialiased;" offset="0" toppadding="0" leftpadding="0">
<table bgcolor="#ffffff" width="100%" border="0" cellspacing="0" cellpadding="0" class="tableContent" align="center" style='font-family:Helvetica, Arial,serif;'>
<tbody>
<tr>
<td><table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff" class="MainContainer">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" width="40"> </td>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<!-- =============================== Header ====================================== -->
<tr>
<td height='75' class="spechide"></td>
<!-- =============================== Body ====================================== -->
</tr>
<tr>
<td class='movableContentContainer ' valign='top'>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="35"></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" align="center" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#222222;'><span class="specbundle2"><span class="font1">Welcome to </span></span></p>
</div>
</div></td>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable">
<p style='text-align:center;margin:0;font-family:Georgia,Time,sans-serif;font-size:26px;color:#DC2828;'><span class="font">[CLIENTS.COMPANY_NAME]</span> </p>
</div>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td valign='top' align='center'>
<div class="contentEditableContainer contentImageEditable">
<div class="contentEditable">
<img src="images/line.png" width='251' height='43' alt='' data-default="placeholder" data-max-width="560">
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr><td height='55'></td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<h2 >Will this be your welcome email?</h2>
</div>
</div>
</td>
</tr>
<tr><td height='15'> </td></tr>
<tr>
<td align='left'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p >
Here’s what you can say: Thanks again for signing up to the newsletter! You’re all set up, and will be getting the emails once per week. Meanwhile, you can check out our <a target='_blank' href='#' class='link1' >Getting Started</a> section to get the most out of your new account.
<br>
<br>
Have questions? Get in touch with us via Facebook or Twitter, or email our support team.
<br>
<br>
Cheers,
<br>
<span style='color:#222222;'>Peter Parker</span>
</p>
</div>
</div>
</td>
</tr>
<tr><td height='55'></td></tr>
<tr>
<td align='center'>
<table>
<tr>
<td align='center' bgcolor='#1A54BA' style='background:#DC2828; padding:15px 18px;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;'>
<div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<a target='_blank' href='#' class='link2' style='color:#ffffff;'>Activate your Account</a>
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr><td height='20'></td></tr>
</table>
</div>
<div class="movableContent" style="border: 0px; padding-top: 0px; position: relative;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height='65'>
</tr>
<tr>
<td style='border-bottom:1px solid #DDDDDD;'></td>
</tr>
<tr><td height='25'></td></tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" class="specbundle"><div class="contentEditableContainer contentTextEditable">
<div class="contentEditable" align='center'>
<p style='text-align:left;color:#CCCCCC;font-size:12px;font-weight:normal;line-height:20px;'>
<span style='font-weight:bold;'>[CLIENTS.COMPANY_NAME]</span>
<br>
[CLIENTS.ADDRESS]
<br>
<a target='_blank' href="[FORWARD]">Forward to a friend</a><br>
<a target="_blank" class='link1' class='color:#382F2E;' href="[UNSUBSCRIBE]">Unsubscribe</a>
<br>
<a target='_blank' class='link1' class='color:#382F2E;' href="[SHOWEMAIL]">Show this email in your browser</a>
</p>
</div>
</div></td>
<td valign="top" width="30" class="specbundle"> </td>
<td valign="top" class="specbundle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign='top' width='52'>
<div class="contentEditableContainer contentFacebookEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/facebook.png" width='52' height='53' alt='facebook icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
<td valign="top" width="16"> </td>
<td valign='top' width='52'>
<div class="contentEditableContainer contentTwitterEditable">
<div class="contentEditable">
<a target='_blank' href="#"><img src="images/twitter.png" width='52' height='53' alt='twitter icon' data-default="placeholder" data-max-width="52" data-customIcon="true"></a>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td height='88'></td></tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" width="40"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
You could simply keep your template-html in a file and use an arbitrary js-templating library (e.g. ejs) to parse the template data and render its html. Something like this should help you get started:
In your app.js do the following:
const fs = require('fs');
const eis = require('ejs');
const template = fs.readFileSync("/path/to/your/template.ejs");
const templateData = { url: `${url}`, otherDataYouNeedToSetInTemplate: "here" };
const renderedHtml = ejs.render(template, templateData};
const mailOptions = {
from: 'stackoverflow',
to: email,
subject: 'test',
html: renderedHtml
};
Then in your template.ejs you can access the properties from templateData and set its values in the html:
<!DOCTYPE html>
<html>
....
Please click this email to confirm your email: <%= url %>`
....
</html>
I have a problem when I send an HTML email signature from MS Outlook.
The problem is that the signature adds extra white space between all the elements and content such as text and even the horizontal line below the name.
The code in my HTML file looks like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="format-detection" content="date=no" />
<meta name="format-detection" content="address=no" />
<meta name="format-detection" content="telephone=no" />
<title>Boating World</title>
<style type="text/css" media="screen">
/*<![CDATA[*/
/* Linked Styles */
body {
padding: 0 !important;
margin: 0 !important;
display: block !important;
background: #ffffff;
-webkit-text-size-adjust: none
}
/*]]>*/
</style>
</head>
<body style="padding:0 !important; margin:0 !important; display:block !important; background:#ffffff; -webkit-text-size-adjust:none">
<table width="500" height="180" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
<tr>
<td align="left" valign="top">
<table width="500" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-size:0pt; line-height:0pt; padding:0; margin:0; font-weight:normal; width:500px; min-width:500px; margin:0" width="500">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style=" font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px;">
Kind Regards
</td>
</tr>
<tr>
<td height="5" style="font-size: 0px; line-height: 5px;">
</td>
</tr>
<tr>
<td style="font-family:Arial, sans-serif; font-size:16px; color:#002855; font-weight:600; line-height:20px; text-transform:uppercase; font-stretch:semi-expanded;">
<!-- Write your name and surname here -->
ELZAAN STEENKAMP
<!-- End of name -->
</td>
</tr>
<tr>
<td height="10" style="font-size: 0px; line-height: 10px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: none; font-size:0pt; line-height:0pt; text-align:left" height="1" bgcolor="#909090">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="200" align="left" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">T:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<a href="#" style="text-decoration:none; color:#444444; cursor:default;">
<!-- Write your landline telephone number here (Please type in same manner "+27 (0)21 418 0840”) -->
+27 (0) 21 418 0840
<!-- end of telephone number -->
</a>
</span>
</td>
</tr>
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">C:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<a href="#" style="text-decoration:none; color:#444444; cursor:default;">
<!-- Write the cellphone number here (Please type in similar manner "+27 (0)82 000 0000) -->
+27 (0) 83 400 3418
<!-- end of telephone number -->
</a>
</span>
</td>
</tr>
<tr>
<td height="22" style="font-family:Arial, sans-serif; font-size:13px; color:#002c5c; font-weight:bold; line-height:20px;">E:
<span style="font-family:Arial; font-weight:100; color:#444444;">
<!-- To put in your email address, you need to add it twice, once next to where it states mailto: and then below, be careful not to change anything other than the email name. -->
<a href="mailto:accounts#boatingworld.co.za" style="text-decoration:none; color:#444444; cursor:default;">
<!-- End of email address code -->
<!-- Write your email address here as well -->
accounts#boatingworld.co.za
<!-- End of email address -->
</a>
</span>
</td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table align="left" width="20" height="20" style="font-size:20px; line-height: 20px;">
<tr>
<td> </td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="200" align="left" style="display:inline-table;">
<tr>
<td style="line-height:10px">
<img src="https://www.boatingworld.co.za/email_signature/bw_logo.jpg" style="display:block"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="20" align="left">
<a href="https://www.facebook.com/boatingworld?v=info" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/facebook.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="https://twitter.com/BoatingWorld1" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/twitter.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="https://www.instagram.com/boating.world/" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/instagram.jpg" />
</a>
</td>
<td width="20" align="left">
<a href="http://www.youtube.com/user/BoatingWorldSA1" style="text-decoration:none; border:none;">
<img src="https://www.boatingworld.co.za/email_signature/youtube.jpg" />
</a>
</td>
<td width="420" align="left">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="5" style="font-size: 5px; line-height: 5px;">
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight: 600; line-height:18px; text-transform:uppercase;">
<a href="https://www.boatingworld.co.za/" style="text-decoration: none;">
<span style="font-family:Arial, sans-serif; font-size:13px; color:#002855; font-weight:bold; line-height:18px; text-transform:uppercase;">
WWW.BOATINGWORLD.CO.ZA
</span>
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I have tested multiple solutions answered elsewhere on the internet on different forums but to no avail.
Please can someone assist with this as this is for a very important client.
Thanks.
I had the same issue. I solved it by adding below styles for p tag.
p { margin-top: 1px; margin-bottom:1px; margin-left:1px; margin-right:1px; }
I made a html email signature, opened it up in browser where it looks fine, and pasted it into my gmail signature section, and each individual block has now got padding in between, and some of the blocks are side by side instead of next to each other.
Strangely by some fluke I managed to get it to look fine on outlook.This is what it's supposed to look like this https://postimg.org/image/uytldx3zd/
Here is the code i'm using- what am I doing wrong?
Any fix would be much appreciated,
Thanks
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style media="screen" type="text/css">
td {line-height:0; font-size: 0.0em; }
img { display: block; float: left; padding: 0; align: absbottom; align: texttop; }
</style>
</head>
<!-- Paste Code Under This Line
_________________________________________________________________________________ -->
<title>emailsignature_500flat</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (emailsignature_500flat.psd) -->
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<a href= callto:4411893280328><img src="https://s20.postimg.org/tk69dnist/emailsignature_500flat_01.jpg" width="254" height="50" alt=""><a href= callto:441189328032></td>
<td rowspan="3">
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/o8rcsyrl9/emailsignature_500flat_02.jpg" width="296" height="113" alt=""><a href=http://thereadinesscom.com></td>
</tr>
<tr>
<td>
<a href=http://thereadinesscomp.com><img src="https://s20.postimg.org/s54ooxx59/emailsignature_500flat_03.jpg" width="254" height="32" alt=""></td>
</tr>
<tr>
<td>
<a href=https://www.linkedin.com/company/129626/><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt=""></td>
</tr>
<tr>
<td colspan="2">
<a href=mailto:info#thereadinesscomp.com><img src="https://s20.postimg.org/c6vyytq2l/emailsignature_500flat_05.png" width="550" height="146" alt=""><a href=mailto:info#thereadinesscomp.com></td>
</tr>
<tr>
<td colspan="2">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt=""></td>
</tr>
</table>
<!-- End Save for Web Slices -->
</body>
<!-- Keep Pasted Code Above This Line!
_________________________________________________________________________________ -->
</html>
I found the following errors in your code.
missing closing anchor tags,
missing colspan
CSS should be inline always
Here is the HTML you need:
<table id="Table_01" width="550" height="357" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<a href=https://www.linkedin.com/company/1296265><img src="https://s20.postimg.org/oya55b4zh/emailsignature_500flat_04.jpg" width="254" height="31" alt="" style="display: block; float: left; padding: 0; " /></a>
</td>
</tr>
</table>
</td>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
</td>
</tr>
<tr>
<td style="line-height:0; font-size: 0.0em;">
<img src="https://s20.postimg.org/t7ev7hnod/emailsignature_500flat_06.jpg" width="550" height="98" alt="" style="display: block; float: left; padding: 0;">
</td>
</tr>
</table>
Let me know if this works for you.
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.
Trying to create a nice html email with a border around the content, but haven't figure that out.....there is always something..... Thanks for a help!
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
like this???
<!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</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ACD13C">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You can wrap your table in a div, make it's background that green and width:100%, change the background of your table to white and its width to 500, the margin:0 auto will center the table, like this:
JS Fiddle- updated
<div style="width:100%; background-color:#ACD13C; padding:50px 0; ">
<table style="margin:0 auto;" bgcolor="white" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</div>
Something like that?
td {
border: 1px solid black;
}
<table bgcolor="#ACD13C" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table bgcolor="#ffffff" width="500" cellpadding="0" cellspacing="0">
<tr>
<td>Text goes here</td>
</tr>
</table>
</td>
</tr>
</table>
do u want to see like this??
<!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</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
min-width: 100%!important;
}
.content {
width: 100%;
max-width: 600px;
}
.header {
padding: 40px 30px 20px 30px;
}
</style>
<style type="text/css">
#media only screen and (min-device-width: 601px) {
.content {
width: 600px !important;
}
}
</style>
</head>
<body>
<table width="100%" bgcolor="#ACD13C" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td class="header" bgcolor="#ffffff">
Text goes here
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>