I want to create a HTML Newsletter, but in Outlook the sent mail does not fit the CSS I wrote:
The following code has no affect in Outlook
body {
font-family: verdana !important;
font-size: 12px !important;
margin: 0;
padding: 0;
}
.overheader {
height: 5px;
background-color: #e6007e;
width: 100%;
}
.ce-bodytext {
font-family: verdana !important;
font-size: 12px !important;
}
I tried using inline CSS, but to no avail:
<div class="wrapper content" style="width: 100%">
<div class="design" style="width: 70%; margin: auto;">
What is the issue & how do I change the code so that the CSS and HTML work in browser, Outlook and as well as other web mailers?
Don't use classes as more or less all email clients deletes the html head element along with all in it, such as script and style sheet links.
Here is how to achieve 100% main width with a centered 70% wide inner element, like your posted sample html, though here I used table's, since that is the best/safest way to do layout for html mails, even in 2016.
<table bgcolor="#aaa" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#eee" border="0" cellpadding="0" cellspacing="0" width="70%">
<tr>
<td style="font-size: 26px; font-family: arial">
Some text...
</td>
</tr>
</table>
</td>
</tr>
</table>
Related
I have built a few email templates the issue is that the CSS is not working on yahoo / outlook / windows native app etc. Pretty much anything that is not mac or google.
I did write the templates using tables but for the CSS I used the style tag because I want the templates to also be responsive.
I will leave some code examples below maybe you can point out my mistake.
<style type="text/css" data-hse-inline-css="true">
* {
margin: 0;
padding: 0;
}
body {
background-color: #ebeff5;
font-family: 'Source Sans Pro', sans-serif;
}
table,
tr,
td {
margin: 0;
padding: 0;
}
table {
border-spacing: 0;
}
img {
width: 100%;
border: 0;
}
p {
font-size: 20px;
color: #39506f;
line-height: 30px;
}
a {
text-decoration: none;
cursor: pointer;
}
.wrapper {
width: 100%;
table-layout: fixed;
background-color: #ebeff5;
}
.main {
background-color: #ebeff5;
margin: 0 auto;
width: 100%;
max-width: 750px;
padding: 35px 15px;
}
.spacing-one {
height: 15px;
}
.spacing-two {
height: 25px;
}
.card {
padding: 20px;
background-color: #ffffff;
border-radius: 5px;
}
.main-font {
font-size: 30px;
color: #1b3040;
font-weight: 400;
}
...
<main class="wrapper">
<table class="main">
<tr>
<td class="card">
<table width="100%">
<tr>
<td>
<img
class="logo"
src="path"
alt="logo"
/>
</td>
</tr>
<tr class="spacing-two"></tr>
<tr>
<td>
<h1 class="main-font">Hey {{name}},</h1>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td>
<p>text.</p>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td style="height: 56px">
<a href="{{url}}" target="_blank">
<span class="main-button"
>Reset Password
<img
class="main-button-icon"
src="path"
alt=""
/></span>
</a>
</td>
</tr>
<tr class="spacing-one"></tr>
<tr>
<td>
<p>
text.
</p>
</td>
</tr>
</table>
The biggest issue here is that not all email clients support HTML5 semantics (like the <main> tag you're using). And email clients will behave very differently in how they do not support it. You can refer to Can I email for details on support of HTML5 semantics.
For example, Gmail does not support the <main> tag. But it will change it into a <div> element and apply the same class attribute you had in the first place, making this seamless.
Yahoo, however, will remove the <main> element completely, thus also removing the styles you wanted to apply on it.
In your case, changing <main class="wrapper"> into <div class="wrapper"> is enough to make it work in Yahoo.
This might not be enough for Outlook on Windows and Windows native client as both of those use Word as a rendering engine and have very poor support for CSS. Thinks like margin:0 auto or max-width won’t work. You will have to rely on conditional comments, tables and eventually mso specific styles to get a proper rendering for Outlook on Windows.
I have written some HTML to add as a disclaimer to company emails, which for the most part works a treat. I recently had to add some extras to it, by means of an overlayed image or 2. When compiling the HTML in web, it looks exactly as I want it to. However as soon as it is sent by email the images are blown up, one doesn't even show and the formatting is all wrong.
I think it must be to do with the type of HTML used by Microsoft when adding a disclaimer, but I don't know enough about it to know where I'm wrong.
Any assistance greatly appreciated!
```
<tr>
<style>
.parent {
position: relative;
top: 0;
left: 0;
background-image:url(https://www.douglas-scott.co.uk/storage/downloads/mwLPJ1KUs9YYEPTLfI3FaF84iaeXQjxDLvHcSLKh.png);
background-size: 100% ;
overflow: hidden;
background-repeat: no-repeat;
height: 110;
text-decoration: none;
}
.image2 {
position: absolute;
top: 5px;
left: 10px;
height: 100;
max-height: 100;
text-decoration: none;
}
.image3 {
position: absolute;
top: 10px;
right: 10px;
height: 100;
max-height: 100;
text-decoration: none;
}
</style>
<td class="parent">
<img class="image2" alt="SS22" src="https://www.douglas-scott.co.uk/storage/downloads/QRIe6dIZLotRovMPQosPFm1lqOBGeF5hPEZdFqJQ.png" align="left">
<img class="image3" alt="£250 L2S Voucher" src="https://www.douglas-scott.co.uk/storage/downloads/l4BjlWxpIbGBzzBKQr12CiMl6zhMPAzU0sFd3NYI.png" align="right">
</td>
</tr>
```
This is my code, I only included the bit that isn't working. On web it is displayed as this: correct output. This is how I am intending for it to show.
However when sent as email, this is how it is outputting: actual output
There are few problems here:
MS Outlook doesn't support absolute or relative positioning
MS Outlook doesn't support background images using CSS.
Images need height and width attributes.
Fortunately there are solutions for all.
Images don't self-size as they do on the web, so adding height and width attributes should solve that.
Regarding the layout, instead of using css positioning to lay out the images, they could be put into a basic two column <table>, like so:
<td class="parent" style="background-image:url(https://www.douglas-scott.co.uk/storage/downloads/mwLPJ1KUs9YYEPTLfI3FaF84iaeXQjxDLvHcSLKh.png); background-size: 100%;">
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="width: 50%; padding: 5px 10px; height: 110px; text-decoration: none;">
<img alt="SS22" src="https://www.douglas-scott.co.uk/storage/downloads/QRIe6dIZLotRovMPQosPFm1lqOBGeF5hPEZdFqJQ.png" align="left" width="300" height="50">
</td>
<td style="width: 50%; padding: 10px; height: 110px; text-decoration: none; text-align: right;">
<img alt="£250 L2S Voucher" src="https://www.douglas-scott.co.uk/storage/downloads/l4BjlWxpIbGBzzBKQr12CiMl6zhMPAzU0sFd3NYI.png" align="right" width="300" height="50">
</td>
</tr>
</table>
</td>
It might seem archaic, but this is the level of CSS that MS Outlook supports and it achieves the design linked in your question.
Regarding background images, we can use VML to simulate background CSS properties in a way that Outlook supports.
So we can wrap this code in a <!--[if mso]> <![endif]--> so only Windows Outlook reads and renders it, and then repeat the background image styles in VML:
<td class="parent" style="background-image:url(https://www.douglas-scott.co.uk/storage/downloads/mwLPJ1KUs9YYEPTLfI3FaF84iaeXQjxDLvHcSLKh.png); background-size: 100%;">
<!--[if mso]>
<v:rect stroked="false" style="width:600px;height:1100px;">
<v:fill type="frame" src="https://www.douglas-scott.co.uk/storage/downloads/mwLPJ1KUs9YYEPTLfI3FaF84iaeXQjxDLvHcSLKh.png" color="#000000" />
<![endif]-->
<table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="width: 50%; padding: 5px 10px; height: 110px; text-decoration: none;">
<img alt="SS22" src="https://www.douglas-scott.co.uk/storage/downloads/QRIe6dIZLotRovMPQosPFm1lqOBGeF5hPEZdFqJQ.png" align="left" width="300" height="50">
</td>
<td style="width: 50%; padding: 10px; height: 110px; text-decoration: none; text-align: right;">
<img alt="£250 L2S Voucher" src="https://www.douglas-scott.co.uk/storage/downloads/l4BjlWxpIbGBzzBKQr12CiMl6zhMPAzU0sFd3NYI.png" align="right" width="300" height="50">
</td>
</tr>
</table>
<!--[if mso]>
</v:rect>
<![endif]-->
</td>
This should give you pretty good coverage in email clients, including Outlook.
I would also recommend inlining your CSS since not every email client supports the <style> tag.
I have created a HTML email and seem to be having issues on some outlooks and mobile outlook with the table cells borders I have attached an image of the issue there seems to be a thin lines where the table cells are.
CSS
html { width: 100%; }
body { -webkit-text-size-adjust: none; -ms-text-size-adjust: none; margin: 0; padding: 0; }
table { border-spacing: 0; border-collapse: collapse; }
table td { border-collapse: collapse; font-family: Arial,sans-serif; line-height:1.4 }
HTML
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td height="10" bgcolor="fd6b0d"></td>
</tr>
</table>
<table width="600" border="0" cellpadding="0" cellspacing="0" bgcolor="006680" align="center">
<tr>
<td width="50" bgcolor="fd6b0d"></td>
<td bgcolor="fd6b0d">
<p style="font-family: Verdana; font-size: 28px; color: #fff; margin: 0; padding: 0; line-height: 60px; text-align: center; font-weight: bold;">
How Confident Are You?
</p>
</td>
<td width="50" bgcolor="fd6b0d"></td>
</tr>
</table>
I thought this was a common issue known as the Outlook Line bug but it isn't.
I couldn't see lines on the desktop versions, but only on the mobiles--because your template is not responsive. So, the Outlook rendering engine is adding an "outlook-overflow-scaling" span wrapper around your tables to compensate.
If you were to make your table responsive (so, for example use width 100%), it would not need to try and scale the email.
I've been battling literally one final bug fix that only appears in Windows Outlook Desktop, versions 2007, 2010, 2013, and 2016 (plus their respective DPI versions). My left padding keeps getting removed from my td although I use left-padding in other places throughout the email that does not get removed (same class!). I'm hoping you guys can spot something I haven't been able to!
Note: I've stripped out the proprietary stuff and put words in it's place. It's a branding nav bar that contains a varying width image (max width is ~198) and text that should be close (10px padding) away from the image, then a phone # alllll the way to the right
What I have tried:
using padding-left instead of shorthand
applying the padding to the p tag instead
changing p tag from p to span
making all widths percentages
removing all alignment from tds
And one other note - my "strong" class doesn't seem to be applying properly either. Not sure if it's related or not, but figured worth adding.
<style type="text/css">
.padding-l-10 {
padding: 0px 0px 0px 10px !important;
}
.branding {
font-size: 12px !important;
line-height: 18px !important;
}
.phone {
font-size: 12px !important;
}
.branding-bar {
padding: 12px 20px 12px 20px !important;
}
.branding-bar p {
vertical-align: bottom !important;
}
.branding-bar img {
display: block !important;
}
.branding-bar-phone {
font-size: 14px !important;
line-height: 13px !important;
font-weight: 300 !important;
text-align: right !important;
}
.small-text {
font-size: 12px !important;
font-weight: 300 !important;
line-height: 13px !important;
}
.strong {
font-weight: 700!important;
color: #333333;
}
</style>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="630">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td class="branding-bar" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="590">
<tr>
<td align="left" class="display-block" valign="bottom" width="20%">IMAGE WOULD BE HERE - DYNAMIC WIDTH</td>
<td align="left" class="display-block-relation padding-l-10" valign="bottom" width="40%">
<p class="small-text">
THIS WOULD BE THE TOP WORD
</p>
<p class="small-text strong">
THIS WOULD BE THE BOTTOM WORD
</p>
</td>
<td align="right" class="display-none" valign="bottom" width="40%">
<p class="branding-bar-phone">
THIS WOULD BE A PHONE NUMBER
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Really sill question but i can't get it to work like i want to... don't do much html anymore. Here's what i got:
<table border="0" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th><th width="10"> </th><th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th></tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="0" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
The second table is not conforming to 600 width, it seems to be overwritten somewhere. I thought if i write any type of inline styles it overwrites everything else. ... I basically want my second table to be the same size as the first.
I've tried just putting an extra <tr><td></td></tr> inside the first table and eliminating the second table altogether but than it makes one td wider and squishes the other in the first two td's
*****This is for an email*****
Here's the header.phtml file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!-- utf-8 works for most cases -->
<meta name="viewport" content="width=device-width"> <!-- Forcing initial-scale shouldn't be necessary -->
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- Use the latest (edge) version of IE rendering engine -->
<title></title>
<!-- The title tag shows in email notifications, like Android 4.4. -->
<style type="text/css">
/* What it does: Remove spaces around the email design added by some email clients. */
/* Beware: It can remove the padding / margin and add a background color to the compose a reply window. */
html,
body {
margin: 0;
padding: 0;
height: 100% !important;
width: 100% !important;
}
/* What it does: Stops email clients resizing small text. */
* {
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
/* What it does: Forces Outlook.com to display emails full width. */
.ExternalClass {
width: 100%;
}
/* What it does: Stops Outlook from adding extra spacing to tables. */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* What it does: Fixes webkit padding issue. */
table {
border-spacing:0 !important;
}
/* What it does: Fixes Outlook.com line height. */
.ExternalClass,
.ExternalClass * {
line-height: 100%;
}
/* What it does: Fix for Yahoo mail table alignment bug. */
table {
border-collapse: collapse;
margin: 0 auto;
}
/* What it does: Uses a better rendering method when resizing images in IE. */
img {
-ms-interpolation-mode:bicubic;
}
/* What it does: Overrides styles added when Yahoo's auto-senses a link. */
.yshortcuts a {
border-bottom: none !important;
}
/* What it does: Overrides blue, underlined link auto-detected by iOS Mail. */
/* Create a class for every link style needed; this template needs only one for the link in the footer. */
.mobile-link--footer a {
color: #666666 !important;
}
/* What it does: Overrides styles added images. */
img {
border:0 !important;
outline:none !important;
text-decoration:none !important;
}
#media screen and (min-device-width: 768px) {
/* Hides the nav menu except for gmail */
*[class].desktopHide {
display: none !important;
}
}
/* Media Queries */
#media screen and (max-device-width: 600px), screen and (max-width: 600px) {
/* What it does: Overrides email-container's desktop width and forces it into a 100% fluid width. */
.email-container {
width: 100% !important;
}
/* Hides the nav menu except for gmail */
*[class].mobileHide {
display: none !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="fluid"],
img[class="fluid-centered"] {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: auto !important;
}
/* And center justify these ones. */
img[class="fluid-centered"] {
margin: auto !important;
}
/* What it does: Forces images to resize to the width of their container. */
img[class="stack-column"],
img[class="stack-column-center"] {
width: 100% !important;
max-width: 600px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-half"],
img[class="stack-column-center-half"] {
width: 100% !important;
max-width: 300px !important;
height: auto !important;
margin: auto !important;
}
img[class="stack-column-third"],
img[class="stack-column-third-center"] {
width: 100% !important;
max-width: 120px !important;
height: auto !important;
margin: auto !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column"],
td[class="stack-column-center"] {
display: block !important;
width: 100% !important;
direction: ltr !important;
}
/* What it does: Forces table cells into full-width rows. */
td[class="stack-column-half"],
td[class="stack-column-half-center"] {
display: inline-block !important;
width: 50% !important;
direction: ltr !important;
}
td[class="stack-column-third"],
td[class="stack-column-third-center"] {
display: inline-block !important;
width: 32% !important;
direction: ltr !important;
}
/* And center justify these ones. */
td[class="stack-column-center"] {
text-align: center !important;
}
/* Data Table Styles */
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Hides table headers */
td[class="data-table-th"] {
display: none !important;
}
/* What it does: Change the look and layout of the remaining td's */
td[class="data-table-td"],
td[class="data-table-td-title"] {
display: block !important;
width: 100% !important;
border: 0 !important;
}
/* What it does: Changes the appearance of the first td in each row */
td[class="data-table-td-title"] {
font-weight: bold;
color: #000000;
padding: 10px 0 0 0 !important;
border-top: 2px solid #eeeeee !important;
}
/* What it does: Changes the appearance of the other td's in each row */
td[class="data-table-td"] {
padding: 5px 0 0 0 !important
}
/* What it does: Provides a visual divider between table rows. In this case, a bit of extra space. */
td[class="data-table-mobile-divider"] {
display: block !important;
height: 20px;
}
/* END Data Table Styles */
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#f8f8f8" style="margin: 0px; padding: 0px; zoom: 100%;">
<table cellpadding="0" cellspacing="0" border="0" height="100%" width="100%" bgcolor="#f8f8f8" style="border-collapse:collapse;">
<tbody>
<tr>
<td>
<!-- Visually Hidden Preheader Text : BEGIN -->
<div style="display:none; visibility:hidden; opacity:0; color:transparent; height:0; width:0; line-height:0; overflow:hidden; mso-hide: all;">
Shop new arrivals now!
</div>
<!-- Visually Hidden Preheader Text : END -->
<!-- Email wrapper : BEGIN -->
<table border="0" width="600" cellpadding="0" cellspacing="0" align="center" bgcolor="#ffffff" style="width:600px; margin: auto;" class="email-container">
<!-- Full Width, Fluid Column : BEGIN -->
<tbody>
<tr>
<td style="font-family:Helvetica, Arial, sans-serif; color: #999999; font-size:10px; text-align: right;">
View in Browser
</td>
</tr>
<!-- Full Width, Fluid Column : END -->
<tr>
<td>
<!-- Logo + Links : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
<tr>
<td valign="middle" align="center" style="padding:0px 0; text-align:center; line-height: 0;" class="stack-column-center">
<img src="http://cdn.website.com/media/wysiwyg/emails/ecomm/2016_0524_dresses/0524_Dresses_09.jpg" alt="website Stone" width="600" height="70" border="0" style="margin: auto;">
</td>
</tr>
<tr>
<td height="5" style="font-size: 0; line-height: 0;"> </td>
</tr>
</tbody>
</table>
<!-- Logo + Links : END -->
<!-- Menu : BEGIN -->
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
<!-- Menu : END -->
<!-- Free Shipping Pre-Header : BEGIN -->
<table width="100%" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="mobileHide" width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="border-top: 0px solid #eeeeee;" height="2">
<img src="http://media.website.com/6385/Shared/sca/spacer.gif" style="display: block;" height="1" border="0">
</td>
</tr>
</tbody>
</table>
Looking at your first bit of code with just the two tables, they are displayed at the same width. I modified your code to put a size 2 red border on both tables and you can see they are indeed both the same width.
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Information:</th>
<th width="10"> </th>
<th style="font-size: 13px; padding: 5px 9px 6px 9px; line-height: 1em;" align="left" bgcolor="#EAEAEA" width="300">Shipping Method:</th>
</tr>
</thead>
<tbody>
<tr>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingAddress().format('html')}} </td>
<td> </td>
<td style="font-size: 12px; padding: 7px 9px 9px 9px; border-left: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA;" valign="top">{{var order.getShippingDescription()}} </td>
</tr>
</tbody>
</table>
<table border="2" bordercolor="red" width="600" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
{{/depend}} {{layout handle="sales_email_order_items" order=$order}}
<p style="font-size: 12px; margin: 0 0 10px 0;">{{var order.getEmailCustomerNote()}}</p>
</td>
</tr>
</tbody>
</table>
As for your second bit of code (the header.phtml file), I'll be honest, I don't quite understand how that ties in with your first. The code you provided is incomplete and nested tables within tables within tables (many of which are single row, single datacell) is just too overly complex to decipher here.
Since this is for an email, and I have battle scars from my own fights getting proper HTML formatting within an email, I will say that you have to throw out all modern standards and styles of HTML development, especially when it comes to Microsoft email clients, and pretend it's the 1990's again. Nested tables are unfortunately sometimes necessary to get what you want (shudder). Just like with any HTML design, the simpler the layout, the easier time you will have achieving it.
Here are also a few links that I found invaluable for reference and education when it came to getting an HTML email to behave properly. Hopefully they will help you as well:
How To Make An Email Newsletter That Looks The Same
CSS Support Guide for Email Clients
What You Should Know About HTML Email
Tips and Best Practices for HTML Emails in Outlook 2007, 2010
Actually both tables have same width. If you update border="01" then you will see width of the tables properly.
If you want to remove second table, add another row in the first table with colspan attribute is equal to 3 because first table has 3 columns.
<tr><td colspan="3"></td></tr>
I would like to suggest using css classes rather than inline styles.