I'm very new to HTML, and I've built a custom HTML email signature. I want it to look like this:
However, with my code below, the three strings I'm grouping next to each other end up with white space between the first and subsequent strings as shown below
What is a proper way to group the three strings together without getting a gap between elements?
<div class="presentational-container">
<table role="presentation" cellpadding="0" cellspacing="0" border="0"style="background: none;margin: 0;padding: 10px 10px 0;border-width: 1px 0 0 0;border-style: solid;border-color: #F2F2F2;">
<tbody>
<tr class="outer-row" style="padding: 0 12px 0 0;">
<td class="headshot-cell" style="text-decoration: none;vertical-align: middle;width: 72px;padding: 0 6px 0 0;">
<a href="http://www.robertcooper.me">
<img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;width:72px"/>
</a>
</td>
<td class="description-cell">
<table role="presentation">
<tbody>
<tr>
<td colspan="2" class="company" style="font-weight: normal;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">TETON Sports</td>
</tr>
<tr>
<div>
<td colspan="2" class="name" style="font-weight: bold;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Josh Jorgensen</td>
<td colspan="2" class="divider" style="font-weight: bold;color: #FF9E18;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">//</td>
<td colspan="2" class="title" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Photographer</td>
</div>
</tr>
<tr>
<td valign="top" class="website" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">
josh#tetonsports.com
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
Those three text parts are in separate table cells, and these tablecells even have colspan="2". So these are aligned with the table cells of the rows above and below which also have colspan="2".
I would either put all three in one cell, or at least remove the colspan="2" from them and add colspan="3" to the cells below and above, since all rows should have the same amount of cells for lining up properly.
Related
I've created a custom HTML email signature with an embedded image. The end result in Komodo previewer and Apple Mail client looks like this
However, once I bring the same HTML code into the Outlook desktop app on a Windows PC the signature renders like this
It seems like Outlook is ignoring the width styling entirely.
How do I get correct sizing of my embedded image in Outlook?
<table cellpadding="0" cellspacing="0" border="0"style="background: none;margin: 0;padding: 40px 10px 30px;">
<tbody>
<tr style="padding: 0 12px 0 0;">
<td style="vertical-align: middle;width: 50px;padding: 0 6px 0 0;">
<a href="http://www.tetonsports.com">
<img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;width:69px"/>
</a>
</td>
<td>
<table>
<tbody>
<tr>
<td style="font-weight: normal;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">TETON Sports</td>
</tr>
<tr>
<div>
<td
<span style="font-weight: bold;color: #000001;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Josh Jorgensen</span>
<span style="font-weight: bold;color: #FF9E18;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">//</span>
<span style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">Photographer</span>
</td>
</div>
</tr>
<tr>
<td valign="top" style="font-style: italic;font-weight: normal;color: #54565A;font-size: 14px;font-family: Helvetica, Geneva, sans-serif;">
<a style="text-decoration: none;font-style: italic;font-weight: normal;color: #54565A;" href="brandon#tetonsports.com">josh#tetonsports.com</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Have you tried using the width HTML attribute of the <img> tag like this: width="69"?
Here's the whole tag:
<img src="https://tetonsports.imagerelay.com/ql/6cde221aa42c4ec8b325b3c0f6235d2e/email-icon-01.png" name="preview-image-url" style="vertical-align: middle;" width="69"/>
I have created a custom HTML email signature that renders fine in my Apple Mail client
but when bringing it into MS Outlook on a PC it renders with unintended line breaks and an enlarged image.
What could be causing the line to break in Outlook and not Apple Mail? Is there a "safeguard" parameter of some sort I could add to make it compatible with both? I'm really new to HTML.
<html>
<STYLE>
A {
text-decoration: none;
}
</STYLE>
<body>
<table width="500%" height="48" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" style="width:69px; height: 50px;" src="https://tetonsports.imagerelay.com/ql/015ce962f5e74fbfb86292c6b6e60ea8/email-icon-01.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:14px;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
TETON Sports
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Josh Jorgensen </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Photographer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>josh#tetonsports.com</i></span>
</td>
</tr>
</table>
</td>
<br>
<br>
</tr>
</table>
<br style=“ line-height:200px;”>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#ffffff;">
...
</div>
<span> </span>
</td>
</tr>
</table>
</body>
</html>
In your table, you are setting your table's width to 500%, while the image's width is in pixels.
So when your window is smaller, your entire table gets smaller but your image stays the same size, eating up space from the text section.
Consider being consistent across the board, and using either only percentages or only pixels for your widths.
In the email signature I'm making for my company I have an embedded image on the left. When I preview the code in Chrome or my IDE the image is sized properly taking up the same height as the three lines of evenly-spaced text to its right. However, when others in my company receive emails from me, sometimes the image is significantly taller than the lines of text next to it. How do I ensure that my image stays a consistent size across devices and email clients?
<html>
<STYLE>A {text-decoration: none;} </STYLE><body>
<table data-mysignature-date="2019-09-17T19:52:14.752Z" data-mysignature-is-paid="0" width="500" cellspacing="0" cellpadding="0" border="0">
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td
valign="center" width="0" style="padding:0 8px 0 0;vertical-align: middle;"><img alt="TETON Sports" width="100" style="width:67px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
</td>
<td style="font-size:1em;padding:0 0 0 0;vertical-align: top;" valign="top">
<table cellspacing="0" cellpadding="0" border="0" style="line-height: 1.4;font-family:Verdana, Geneva, sans-serif;font-size:90%;color: #000001;">
<tr>
<td>
<div style="font: 1.0em Helvetica, Geneva, sans-serif;color:#000001;">
[COMPANY NAME]
</div>
</td>
</tr>
<tr>
<td style="padding: 0px 0;">
<div style="color:#000001;font-family:Helvetica, Geneva, sans-serif;">
<b> Austin Berenyi </b>
<span style="color:#FF9E18;font-family:Helvetica, Geneva, sans-serif;"> <b>//</b> </span>
<span style="color:#54565A;font-family:Helvetica, Geneva, sans-serif;"> <i>Graphic Designer</i> </span>
</div>
</td>
</tr>
<tr>
<td>
<span style="font: 1.0em Helvetica, Geneva, sans-serif;color:#54565A;" <span><i>austin#company.com</i></span>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
It may sounds naive, but just try to specify height of your img:
<img alt="TETON Sports" style="width:67px; height: 48px;" src="https://tetonsports.imagerelay.com/ql/88530bbf8421421caccd471108c1fc18/email-icon.png">
In addition try to always set font-size of text (px or em) and try to avoid these values as percents.
I am creating HTML table in Outlook email to make it look like a template example like this,
However the one I created isn't match like it should be. There are 3 issues,
first Manage Information Technology at top right is shift down instead of suppose to be equal position as black box logo like an example template from above.
Second, ServiceNow - Release Notes aligned on left instead of center even though I already have align="center" in <td>.
Third, the black border line locate below orange banner disappear but the snippet code and the outlook preview is showing it but the actual outlook is not.
Here is 2 images of incorrect outlook display,
<table style="height: 643px;" width="772" cellspacing="0" cellpadding="0">
<tbody>
<tr style="border-style: none none solid none;">
<td colspan="2"><span style="font-family: 'times new roman', times;"><img id="logo" style="float: left;" title="" src="toolbar-logo.png" alt="" width="127" height="44" /></span></td>
<td colspan="2">
<p style="text-align: right;"><font face="calibri, times"><span style="font-size: 18.6667px;"><font color="red"><strong>Manage Information Technology</strong></font></span>
</font>
</p>
</td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><font size="7" face="calibri"><strong>ServiceNow - Release Notes</strong></font></td>
</tr>
<tr style="border-style: none none solid none;">
<td colspan="4" align="center"><img id="dss-banner" src="DSSbanner.png" alt="" width="100%" height="161" /></td>
</tr>
<tr>
<td style="background: none; border-bottom: 4px solid #000000; height: 2px; width: 100%; margin: 0px 0px 0px 0px;" colspan="4"><span style="font-family: 'times new roman', times;"> </span></td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Team,</span></td>
</tr>
<tr>
<td colspan="4"><span style="font-family: 'calibri', times;"><span style="font-size: 12pt;">The following capabilities and improvements have successfully been promoted to the production ServiceNow instance through "${short_description}" on ${mail_script:release.stories.email.date}.<br />The release notes have also been added in the Release Notes Knowledge Article per standard process.</span></span>
</td>
</tr>
<tr>
<td>${mail_script:release.stories.email}</td>
</tr>
<tr>
<td colspan="4"><span style="font-size: 12pt; font-family: 'calibri', times;">Thank you,<br />Service Management</span></td>
</tr>
</tbody>
</table>
Can anyone point where where possible reason why it didn't match correctly?
I don't have a lot of experience with HTML tables and in-line CSS, but I'm trying to create an HTML email signature. Ideally, I'd like to have a small image on the left, text in the center, and a larger logo on the right, with a line of text centered below everything.
I have the basic content in, however I've tried to align everything with floats which don't seem to be working. What's the best way to have everything lined up in order horizontally?
jsfiddle
<br />
<meta name="format-detection" content="telephone=no">
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:0;padding:0;">
<tr>
<td width="47" style="float:left;width:47px;margin:0;padding:0;">
<img src="http://lorempixel.com/47/43/" alt="First Last" style="border:none;width:47px;">
</td>
<td width="10" style="width:10px;"> </td>
<td valign='top' style="margin:0;padding:0;">
<table id="sig2" cellspacing='0' cellpadding='0' border-spacing='0' style="float:left;padding:0;margin:0;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:13px;color:#D31145;border-collapse:collapse;-webkit-text-size-adjust:none;">
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;"><a style="border:none;text-decoration:none;color:#D31145;" href="mailto:email#example.com">FIRST LAST</a>
</td>
</tr>
<tr style="margin:0;padding:0;color:#000104;">
<td style="margin:0;padding-left:8px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;font-size:16px;white-space:nowrap;">
<span style="border:none;text-decoration:none;color:#000104;">REALTOR | P <a style="border:none;text-decoration:none;color:#000104;" href="tel:1111111111">111.111.1111</a></span>
</td>
</tr>
<td width="177" style="float:right;width:177px;margin:0;padding:0;">
<img src="http://lorempixel.com/177/54/" alt="ZOPA Realty Group" style="border:none;width:177px;">
</td>
</table>
<table width='600' id="sig" cellspacing='0' cellpadding='0' border-spacing='0' style="margin:-15 0 0 60;padding:0;">
<tr>
<td><span style="margin:0;padding-left:8px;font-size:7px;font-family:'Gill Sans', 'Gill Sans MT', Calibri, sans-serif;color:#000104;white-space:nowrap;">BRE xxxxxxxx | Broker BRE xxxxxxxx. In association with Keller Williams. Each Keller Williams Realty office is independently owned and operated.</span></td>
<br />
Forget float, margin and html 3/5. The mail is very obsolete. You need do all with table.
One line = one table. You need margin or padding ? Do another column.
Codepen
Example : i need one line with
1 One Picture of 40*40
2 One margin of 10 px
3 One text of 400px
I start my line :
<table style=" background-repeat:no-repeat; width:450px;margin:0;" cellpadding="0" cellspacing="0" border="0">
<tr style="height:40px; width:450px; margin:0;">
<td style="height:40px; width:40px; margin:0;">
<img src="" style="width=40px;height40;margin:0;display:block"
</td>
<td style="height:40px; width:10px; margin:0;">
</td>
<td style="height:40px; width:400px; margin:0;">
<p style=" margin:0;"> my text </p>
</td>
</tr>
</table>
This should do the trick:
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="50" height="40" valign="top" rowspan="3">
<img alt="" src="" width="40" height="40" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="350" height="40" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
LAST FIRST<br>
REALTOR | P 123.456.789
</td>
</tr>
<tr>
<td width="350" height="70" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="" src="" width="200" height="60" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="350" height="20" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
UPDATE: Adjusted code per the comments:
After viewing your jsFiddle, an important thing to note about tables is that table cell widths in each additional row all have to be the same width as the first, and all cells must add to the total width of your table.
Here is an example that will NOT WORK:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#252525">
</td>
<td width="400" bgcolor="#454545">
</td>
</tr>
<tr>
<td width="300" bgcolor="#252525">
</td>
<td width="300" bgcolor="#454545">
</td>
</tr>
</table>
Although the 2nd row does add up to 600, it (and any additional rows) must have the same 200-400 split as the first row, unless you are using colspans. If you use a colspan, you could have one row, but it needs to have the same width as the cells it is spanning, so this works:
<table width="600" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="200" bgcolor="#252525">
</td>
<td width="400" bgcolor="#454545">
</td>
</tr>
<tr>
<td width="600" colspan="2" bgcolor="#353535">
</td>
</tr>
</table>
Not a full tutorial, but I hope that helps steer you in the right direction in the future.
Here is the code you are after:
<table width="900" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="57" height="43" valign="top" rowspan="2">
<img alt="Rashel Adragna" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_head.png" width="47" height="43" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
<td width="843" height="43" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
RASHEL ADRAGNA<br>
REALTOR | P 855.900.24KW
</td>
</tr>
<tr>
<td width="843" height="64" valign="bottom" style="font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #000000;">
<img alt="Zopa Realty Group logo" src="http://zoparealtygroup.com/wp-content/uploads/2013/10/sig_logo.png" width="177" height="54" style="margin: 0; border: 0; padding: 0; display: block;">
</td>
</tr>
<tr>
<td width="843" colspan="2" height="20" valign="bottom" align="center" style="font-family: Helvetica, Arial, sans-serif; font-size: 10px; color: #000000;">
all your minor text here | all your minor text here | all your minor text here
</td>
</tr>
</table>
You'll note that I've added an extra 10px to some of your table cells. This in combination with align/valigns act as padding between your cells. It is a clever way to aviod actually having to add padding, margins or empty padding cells.