My application sends an HTML e-mail to users. When I test it as a plain HTML file, it looks ok in various browsers (Firefox, IE, Chrome, Safari, Android phone browsers). It also displays fine in webmail clients that I Have tested (Gmail, Yahoo mail).
But when I view the message in Microsoft Outlook, the layout is messed up. Specifically - the right hand icon is not top aligned, but displayed much lower than the left icon. This is the HTML code:
<div style="width: 100%; margin: 0px auto; background-color: #333; border: 0px solid #333; color: #FFF">
<!-- Logos -->
<div style="background-color: #333; border: 0px solid #333; color: #FFF; padding-top: 2px; padding-right: 2px; padding-left: 2px">
<img src="MyLogo.png" height="30px" width="30px" alt="Logo" border="0">
<img src="Image_1.png" height="27px" width="120px" align="right" alt="recommend" border="0">
</div>
<!-- Title -->
<div style="text-align: left; font-size:12px; padding-left: 2px; font-weight: bold;">
<span style="font-size:12px; padding-left: 2px; font-weight: bold;">Comment line - should be left aligned</span>
</div>
<div style="text-align: center; text-transform: uppercase; color: #DDD; font-size: 12px;font-weight: bold;">
<span><b>My Title Should Be Centered</b></span>
</div>
</div>
You may need to do more research on html email design. It is not the same as html for the web and should be table based instead of divs. Here is a basic example of how your example code should look:
<table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="left">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="30px" height="10px" alt="Logo">
</td>
</tr>
<tr>
<td align="left" style="font-size:12px; padding-left: 2px; font-weight: bold; color:#DDDDDD;">
Comment line - should be left aligned
</td>
</tr>
</table>
</td>
<td align="right" valign="top">
<img style="margin: 0; border: 0; padding: 0; display: block;" src="MyLogo.png" width="120px" height="27px" alt="recommend">
</td>
</tr>
<tr>
<td align="center" colspan="2" style="text-transform: uppercase; color: #DDDDDD; font-size: 12px; font-weight: bold;">
My Title Should Be Centered
</td>
</tr>
</table>
A couple of good introduction to email design resources:
Campaign Monitor
Reach Customers Online
You should really be building your email using responsive techniques as well.
Here is a very good article that describes the method :
http://blog.booking.com/responsive-email.html
Related
For some reason, the text <p> in the footer section of my email template in Outlook 365 Windows is still remaining the color black. This is also happening for the button text too <a> but all other clients are fine when tested.
Here is the media query and footer markup:
#media (prefers-color-scheme: dark) {
body, center, table {
background: #2d2d2d!important;
color: #ffffff!important;
}
.darkmode-footer {
background-color: #7F7CAC!important;
}
.darkmode-social {
background-color: #60C1CB!important;
}
}
<table cellpadding="0" cellspacing="0" border="0" align="center" style="border-spacing: 0px; color: #565656; font-family: 'Lato', sans-serif, Arial, Helvitica!important; background-color: #fafdfe; Margin: 0; padding: 0; width: 100%; max-width: 600px;" role="presentation">
<!-- START FOOTER -->
<tr>
<td style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" class="darkmode-footer" width="100%" style="border-spacing: 0; background-color: #7F7CAC;" role="presentation">
<tr>
<td height="8" style="background-color: #21c6b8;"></td>
</tr>
<tr>
<td style="padding: 60px 10px 25px 10px; color: #ffffff; text-align: center; font-size: 16px;">
<p style="font-size: 18px; font-weight: bold; padding: 10px 0 5px 0;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 5px;">Lorum</p>
<p style="font-size: 16px; padding-bottom: 20px;">Lorum</p>
</td>
</tr>
<tr>
</tr>
<tr>
<td height="8" style="background-color: #21c6b8;"></td>
</tr>
</table>
</td>
</tr>
<!-- END FOOTER -->
</table>
And here is a snippet of the button markup:
<tr>
<td align="left" style="padding-left: 10px;">
<table cellpadding="0" cellspacing="0" border="0" align="left" border="0" style="border-spacing: 0;" role="presentation">
<tr>
<td style="border-radius: 10px;" bgcolor="#60C1CB">
Lorum
</td>
</tr>
</table>
</td>
</tr>
I can add more markup if needed.
Outlook on Windows uses Word’s rendering engine and does not support media queries.
The only possible tweak regarding dark mode in this version of Outlook is to use VML gradients. You can read more about it here: https://webdesign.tutsplus.com/tutorials/how-to-fix-outlook-dark-mode-problems--cms-37718
I have a problem with an html email template in Gmail. In all other rendered browsers/mail clients it's rendered good so far, but I discovered a problem on Gmail Android App (tested on Samsung Galaxy S9+).
As you can see in the image, the big title beside the image is cut due to overflow - and I have no solution on how to prevent this. As said before, this happens on no other (mobile) mail client so far.
Found on Stack and other resources, that Gmail App can increase font-size - tried out following tipps I've seen so far, all without any positive effect:
!important directly on <td> and/or <a> with .listing-title
font-size in pt instead of px (with and without !important)
spacer.gif as top row (creates huge empty space on left side)
white-space: nowrap; can't be used because usually these titles are bigger than one line and this looks weird when cut off with overflow:hidden
special class with u + .gmail
Even if I change height of image and text-container - this then effects ALL mail clients of course...
Note: I'm not allowed to do big design changes, so it needs to be img on left side and these texts on right side.
Does anyone has further suggestions on how this cut off could be prevented?
Thank you in advance!
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
span.yshortcuts {
color: #000;
background-color: none;
border: none;
}
span.yshortcuts:hover,
span.yshortcuts:active,
span.yshortcuts:focus {
color: #000;
background-color: none;
border: none;
}
html,
table {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", arial;
}
.main-tbody * {
margin: 0;
padding: 0;
}
.padding {
width: 50px;
}
.copyright {
width: 500px;
}
.location-row {
display: block !important;
}
.button-padding {
display: none !important;
}
#media screen and (max-width:620px) {
.location-row {
display: none !important;
}
.main-table {
width: 320px !important;
}
.inner-table {
width: 320px !important;
}
.image-listing {
width: 80px !important;
height: 60px !important;
max-width: 80px !important;
max-height: 60px !important;
}
.image-container {
width: 80px !important;
height: 60px !important;
}
.listing-title {
font-size: 14px !important;
line-height: 18px !important;
height: 35px !important;
}
.listing-price {
font-size: 12px !important;
height: 14px !important;
}
.button-padding {
display: block !important;
}
.copyright {
width: 320px !important;
}
}
a[x-apple-data-detectors],
.x-gmail-data-detectors,
.x-gmail-data-detectors *,
.aBn,
u+#body a,
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
<body id="body" style="font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Ubuntu, 'Helvetica Neue', sans-serif; margin:0; min-width:320px;">
<table class="main-table" border="0" cellpadding="0" cellspacing="0" align="center" style="text-align: center; background: #f5f5f5; margin-inline-start: auto; margin-inline-end: auto;" width="600">
<tbody class="main-tbody">
<!-- Header -->
<tr align="center" style="margin: 0 auto; text-align: center;">
<td colspan="3">
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" width="500" style="margin: 0 auto; text-align: center;">
<tbody align="center">
<tr>
<td colspan="3" height="40" style="height: 40px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr style="height: 40px; width: 100%;" align="center">
<td colspan="3" class="desktop-logo" width="500">
<img height="48" width="128" style="display: inline-block; vertical-align: middle" alt="Logo" src="https://via.placeholder.com/128x48.png?text=logo">
</td>
</tr>
<tr>
<td colspan="3" height="30" style="height: 30px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- Header -->
<tr>
<td class="padding" width="50"></td>
<td>
<!-- Listing -->
<table class="inner-table" border="0" cellpadding="0" cellspacing="0" align="center" style="background-color: #ffffff;" width="500">
<tbody>
<tr class="list-container" style="width: 100%; max-height:140px;">
<td width="10"></td>
<td class="image-container" colspan="1" width="160" height="140" style="max-height:140px;">
<a href="">
<img class="image-listing" src="https://via.placeholder.com/160x120.jpeg?text=image" alt="" style="display: block; width: 100%; height: 100%; max-height: 120px;max-width: 100%; object-fit: cover" width="160" height="120">
</a>
</td>
<td width="10"></td>
<td class="text-container" colspan="2">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="100%" style="width: 100%;">
<tbody>
<tr>
<td class="padding-top-inner-table" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td>
<a href="" style="width: 500px">
<table border="0" cellpadding="0" cellspacing="0" align="left" width="500" style="width: 100%; text-align: left; color: #212338;">
<tbody>
<tr class="location-row">
<td style="width:100%; font-size: 12px; font-weight: 400;display: block; height:16px;" height="16">
<a href="" style="overflow: hidden; width:100%;height: 16px; margin: 0;text-decoration: none;color: #232f3f; display: block">
A small title
</a>
</td>
</tr>
<tr>
<td class="location-row" height="10" style="height: 10px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td class="listing-title" style="font-size: 16px; height:42px; font-weight: 400;display: block" height="42">
<a class="listing-title" href="" style="overflow: hidden; height: 42px; margin: 0;color: #232f3f;display: block; text-decoration: none; font-weight:bold; font-size: 16px;">
The very main big title which makes problems
</a>
</td>
</tr>
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
<tr height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</tr>
<tr height="19" style="height: 19px;">
<td class="listing-price" height="18" style="height:18px; margin: 0;font-weight: normal; font-size:14px; text-align: left; text-decoration: none;">
Tag 1 | Tag 2 | € price
</td>
</tr>
</tbody>
</table>
</a>
</td>
<td width="15" style="width: 15px;">
<p style="margin: 0;"></p>
</td>
</tr>
<tr>
<td colspan="3" height="8" style="height: 8px;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="5" height="10" style="height: 10px; background: #f5f5f5;">
<p style="margin: 0;"></p>
</td>
</tr>
</tbody>
</table>
<!-- Listing -->
</td>
<td class="padding"></td>
</tr>
</tbody>
</table>
I can't seem to reproduce the problem on your screenshot in Gmail on Android. My guess is there's something else in your code conflicting with Gmail's rendering. One thing I see is that there are missing <td>s here and there in your code. For example here:
<tr class="location-row" height="27" style="height: 27px;">
<p style="margin: 0;"></p>
</tr>
This should be:
<tr class="location-row" height="27" style="height: 27px;">
<td><p style="margin: 0;"></p></td>
</tr>
There are also two <body> elements in your code.
As a general rule for Gmail troubleshooting, I would:
Make sure your <style> tags are inside the <head> of your email. Gmail doesn't support <style> in the <body>.
Make sure your email can render correctly with and without <style> tags. Gmail mobile webmail and Gmail Apps with Non Gmail Accounts don't support <style> tags.
Make sure your HTML overall weight is not bigger than 102 Kb. Gmail clips email at 102 Kb and limits <style> to 16 Kb.
Use a neutral service that doesn't alter your HTML to send your tests (like Putsmail or Parcel).
Here’s an old post I wrote about troubleshooting Gmail’s responsive design support .
If this still doesn't help, feel free to share the entire code that you sent to trigger that bug in the first place.
Trying to get last piece done which is the Email footer area.
There are 4 links in a table, which in web-view are fine, they are in horizontal line.
On Mobile version I'm trying to have them in sets of 2.
Meaning 2 links on top and 2 below them.
The thing is this needs to be done with inline CSS, without having style in it's own separate section.
<table border="0" cellpadding="0" cellspacing="0" id="Table5" width="100%">
<tr style="font-size: 11px; background-color: black;">
<td align="center">
<br>
<br>
<span style="color:#7A7A7A; line-height: 1.3; "><font face="Arial" size="1" ><b>GENERIC INFORMATION 123
<div style="line-height:1.3;">T 000 000 000 |
TEST#TESTING.COM<br></div></b></font></span><br>
<br>
<span style="color: rgb(221, 221, 221);"><font face="Arial" size="1"><b><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">BOOK APPOINTMENT</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">PRIVACY</span></a><a alias="" conversion="false" data-linkto="http://"google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">UNSUBSCRIBE</span></a><a alias="" conversion="false" data-linkto="http://" href="google.com" style="color:#999999;text-decoration:none;" title=""><span style="padding:12px;">CONTACT US</span></a></b></font></span><br>
<br>
</td></tr></table>
Any advice? #media is out of the question currently since it cannot be used with inline CSS.
This is the code you need to start. You'll have to do some footwork to get this to not stack in Outlook desktop email clients. It works in every major email client and does not require a #media tag.
The first table always spans the width of email body.
The Left and Right are 300px wide. When the email client is under 300px wide, they will stack.
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="100%" style="">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: center;">
<p style="margin: 0;">Single Column</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
<p style="margin: 0;">Left Column</p>
</td>
</tr>
</table>
<table role="presentation" cellspacing="0" cellpadding="0" border="1" width="300" style="float:left;">
<tr>
<td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;">
<p style="margin: 0;">Right Column</p>
</td>
</tr>
</table>
Good luck.
I'm having trouble getting Outloook 2013 to render this code correctly. I'm trying to get the two columns next to each other in a 600px table in the 2nd row.
For some reason, the first column in the second row is spanning 600px and the second column is correctly to the right but is just tacked on in addition to the 600px so it spans larger than the rest of the columns.
Here is the jsfiddle of the code (sorry for the long code). https://jsfiddle.net/abdiyohan/hdpjjh5x/2/
<body bgcolor="#CCCCCC">
<table align="center" width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;">
<tr>
<td width="100%" height="100%" bgcolor="#CCCCCC" style="background-color:#CCCCCC;" align="center">
<table style="width:600px;" cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff" align="center">
<tr>
<td colspan="2" style="border-top: 7px solid #a0a5a6; border-bottom: 2px solid #a0a5a6; color: #000000;width:100%;" bgcolor="#005195" height="95" width="100%">
<img align="top" style="font-family:Arial,Helvetica,sans-serif;font-size: 18px;border-style: none;color: #ffffff;" alt="" src="" height="95" width="600" border="0" />
</td>
</tr>
<tr>
<td width="75%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width:75%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"><a name="English">Lorem Ipsum</a>
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
<td colspan="1" style="border-bottom: 2px solid #a0a5a6;background-color:#efefef;padding:20px 20px 0px 20px;font-family: Arial,Helvetica,sans-serif;color:#005195; width:25%; font-size: 14pt; line-height: 28px;" align="right" bgcolor="#ffffff" valign="top" width="25%">
<div style="width:100%;height:100%;" width="100%">
<h1 style="font-size: 14pt;font-family: Arial,Helvetica,sans-serif;color:#005195;font-weight:normal;padding:0px;margin:0px;">Global Links</h1>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px;margin-top:10px;"><a style="color:#4682B4; text-decoration: none;" href="#English" target="_self">English</a>
</p>
<p style="color:#4682B4;font-size: 11pt; line-height: 18px; margin-bottom: 10px; margin-top: 20px;"><a style="color:#4682B4; text-decoration: none;" href="#Spanish (Latin America)" target="_self">Español (Latinoamérica)</a>
</p>
</div>
</td>
</tr>
<tr>
<td colspan="2" width="100%" style="border-bottom: 2px solid #a0a5a6;padding:20px 20px 10px 20px;font-family: Arial,Helvetica,sans-serif; color: #e83e2a; width: 100%;font-size: 14pt; line-height: 28px;" valign="top" align="left">
<div width="100%" style="width:100%;font-family: Arial,Helvetica,sans-serif; color:#005195;padding-bottom:0px; font-size: 14pt; line-height: 28px;"> <a name="Spanish (Latin America)"></a>¡Comparta su opinión!
<p style="line-height: 20px; margin-bottom: 10px; margin-top: 0px; font-size: 11pt;padding-top:10px;color:#005195;">Lorem Ipsum,</p>
<table cellpadding="0" cellspacing="0" border="0" style="display:block;margin:0px 20px 20px 0;" align="left">
<tr>
<td height="28" style="height:28px;font-family: Arial,Helvetica,sans-serif; font-size: 14px; background:#ccc; border-radius: 5px; padding: 0px 10px; color: #005195;" align="left">
<div align="center"><a style="color: #005195; text-decoration: none;" href="#top" target="_self">Back to Top</a>
</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
I know the code looks pretty messy, but I've tried so many solutions and fixes from across the internet and have come up with nothing.
This code works in OWA, which is strange and depressing, but breaks in Outlook 2013 and Outlook 2011 for Mac. Any help would be much appreciated.
The fact is that Outlook uses Word for rendering HTML markup. You can find the supported and unsupported HTML elements, attributes, and cascading style sheets properties described in the following series of articles in MSDN:
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 2 of 2)
This is an error which only occurs in Outlook 2010. This email template seems to work on 90% of devices and browsers.
The graphic below is an example of how it looks in Outlook 2010. The crude blue draw over is intended to show how it should look. You can also view the fiddle for the entire code which displays that section how it is supposed to be displayed.
http://postimg.org/image/zacxr5acr/
Here's the full fiddle link http://jsfiddle.net/Nexus1234/bxp14vcw/
Note - the below sample code is only the relevant section and sending this on its own in an email doesn't cause the issue, it's somewhere within the complete html which is in the jsfiddle
<!-- Two Column (Images Stacked over Text) -->
<table align="center" bgcolor="#EEEEED" border="0" cellpadding="0" cellspacing=
"0" class="deviceWidth" width="580">
<tbody>
<tr>
<td class="center" style="padding:10px 0 0 5px">
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/forum.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="width:100%;border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Roman Forum<br />
</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Here,
in a small space hemmed in by the great rocks of the Capitoline
and Palatine hills, the greatest names of Roman history fought
for power and prestige. Amidst an extraordinary concentration
of famed and marvellous buildings jostling for space, you will
walk where Antony spoke over Caesar’s body, Cicero
delivered stinging orations and the legions processed in
triumph.</span></p>
</td>
</tr>
</tbody>
</table>
<table align="left" border="0" cellpadding="0" cellspacing="0" class=
"deviceWidth" width="49%">
<tbody>
<tr>
<td align="center">
<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
<img alt="" class="deviceWidth" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/villa-deste-tivoli.jpg"
style=
"border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
</td>
</tr>
<tr>
<td style=
"font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
<table style="border-bottom: 1px solid #333">
<tbody>
<tr>
<td style="padding:0 10px 10px 5px" valign="top">
<img alt="" id="circle" src=
"https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
style=
"border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>
<td style="padding:0 10px 10px 0" valign="middle">
<h1 style=
"text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
The Villa Adriana & The Villa D'Este</h1>
</td>
</tr>
</tbody>
</table>
<p><span style=
"font-family:arial,helvetica neue,helvetica,sans-serif;">Experience
the opulence of two ages in a trip out to the inspiring
hillside retreat of Tivoli. In the morning, we visit the
massive, brilliantly preserved and sprawling villa of the
Emperor Hadrian, where luxury on an unparalleled scale centres
on a fantasy rendition of the River Nile. The afternoon is
spent amidst the fountains and gardens of the enchanting
Renaissance Villa d’Este.</span></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table><!-- End Two Column (Images Stacked over Text) -->
One suggestion would be to always keep in mind the 20px rule. Outlook loves to add spacing around tables, making aligned tables a hassle.
My usual equation is,
(Wrapper table - 20px) / 2.
Your example:
(580 - 20px) = 560 / 2.
Percentages are tricky, I would set your tables as a fixed width. Your deviceWidth class will handle your widths on mobile anyway.
I would suggest applying this too all of your aligned tables.
If that doesn't work, let me know.