I will post my HTML, but I'm not sure how the first table (which contains all subsequent tables) is always an additional 2-3 pixels wider than the rest of the content. I have spent the last 2 hours troubleshooting what I believe should be an easy fix... but I can't seem to find any other areas that may be causing the problem. I apologize if the solution is obvious, I haven't designed a website since I was in high school so my skills are a little rusty/aged.
<html>
<head>
<title>Piedmont Wealth Solutions</title>
<style type="text/css"><!--
a:link {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:visited {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:active {
color:000000; font-face:arial; font-size:10pt; text-decoration:none
}
a:hover {
color:000000; font-face:arial; font-size:10pt; text-decoration:underline
}
body {
color:Body; font-size:10pt; font-family:Arial;
}
td {
color:Body; font-size:10pt; font-family:Arial
}
--></style>
</head>
<body bgcolor="e9e9e9" background="page_bg.gif" font face="arial" size="10" valign="top" topmargin="0" leftmargin="180">
<table width="537" cellspacing="0" cellpadding="0" valign="top" align="left" height="100%" border="0" bgcolor="265b78">
<tr width="537" valign="top" align="left">
<td valign="top" align="left" width="36" background="table_bg_left.gif">
</td>
<td width="501" valign="top" align="left">
<!------banner/nav----->
<table width="501" valign="top" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="c5c5c5">
<tr valign="top" align="left" border="0">
<img src="banner_nav.jpg" border="0" valign="top" align="left">
<img src="content_top_spacer.jpg" border="0" valign="top" align="left">
</td>
</tr>
</table>
<!------content------>
<table width="501" height="350" cellspacing="0" cellpadding="0" border="0" align="left">
<tr valign="top" align="left">
<td valign="top" align="left" width="356" bgcolor="f5F8Fa">
<img src="aboutus_header.jpg" border="0" valign="top">
<br>
<br>
Content
</td>
<td valign="top" width="144" bgcolor="f0f3f5">
<img src="news_header.jpg" border="0" align="left" valign="top"> <br><br>
google news feed
</td>
</tr>
</table>
<!------address/disclaimer------>
<table width="501" cellspacing="0" cellpadding="0" height="45%" border="0" valign="top" align="left" bgcolor="265b78">
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="aac6d5">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left" height="15" bgcolor="7da6bc">
</td>
</tr>
<tr valign="top" align="left">
<td valign="top" align="left">
<img src="bottom_disclosure.jpg" align="left" valign="top" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tables should not be used for layout purposes, that's what CSS is for. Tables are for tabular data. With CSS you have a very nice control over the positioning and dimensions of your content.
Here's a collection of reasons why you should opt for CSS.
This is (IMHO) the best book for a head start.
Related
Running into my regular struggles with email template designs, in particular that Gmail removes classes and thus I can't center a td via any means. Is there any way at all to change the "align" from left to center on the td with the image? Maybe I can comment in additional TDs on sides to center it, if Gmail permits it. I'm at a loss.
Template is mildly frankensteined from a template block editor.
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" align="left">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I believe the following code should resolve your issue. When viewing the code you will see there is an element with an id of "I CHANGED FROM LEFT TO CENTER". This seemed to cause the issue, hopefully it works for you too!
<!DOCTYPE html>
<html>
<body>
<table class="row" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="280" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td align="left">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; width:auto !important;" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td class="img-responsive" width="280" align="left">
<img alt="280x200x1" src="#" style="width:100%; height:auto;" width="280" height="200">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<table data-primary-order="1" data-primary-type="bgcolor" data-bgcolor="Columns" width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f6f6" align="center">
<tbody><tr>
<td align="center">
<table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; max-width:90%; width:90%;" width="90%" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
<tr>
<td>
<table style="width:auto !important;" cellspacing="0" cellpadding="0" align="center" id="I CHANGED FROM LEFT TO CENTER">
<tbody><tr>
<td data-color="Titles" data-size="Titles" data-min="14" data-max="46" style="color: #333333; font-family: 'roboto', Arial, Helvetica, sans-serif; font-weight: 400; font-size: 13px; line-height: 22.1px;" style="text-align: right;">text text<br>text text</td></tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="mso-line-height-rule: exactly; line-height:15px; font-size:0;" height="15"> </td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</body>
</html>
I am trying to create a responsive HTML email. The two columns should be equal height and they currently stack on mobile. Everything works properly until there is a lot of text as the Billing Information or Shipping Information. It's an unlikely case that the text will ever look like this, but I must handle all possibilities without the email breaking. How can I make my td stretch vertically instead of horizontally? I cannot use a fixed width as it will break the responsiveness of my table.
<table align="left" border="0" cellpadding="0" cellspacing="0" class="mcnTextBlock" width="100%">
<tbody class="mcnTextBlockOuter">
<tr>
<td valign="top" width="100%" class="mcnTextBlockInner" style="padding-top:9px; padding-right:18px; padding-left: 18px; padding-bottom: 15px;">
<!--[if mso]>
<table align="left" border="0" cellspacing="0" cellpadding="0" width="100%" style="width:100%;">
<tr>
<![endif]-->
<!--[if mso]>
<td valign="top" width="600" style="width:600px;">
<![endif]-->
<table align="left" bgcolor="white" border="0" cellpadding="5" cellspacing="0" style="max-width:100%; min-width:100%;" width="100%" class="mcnTextContentContainer">
<tbody>
<tr>
<td valign="top" width="50%" class=" templateColumnContainer"">
<!--<td valign="top" width="300" class="mcnTextBlockInner" style="padding-top:9px;padding-right:18px;padding-left:18px;padding-bottom:15px;"> -->
<table border="0" cellpadding="5" cellspacing="0" width="100%" style="max-width:100%; min-width:100%;" class="mcnTextContentContainer">
<tr>
<td valign="top" align="center" class="leftColumnContent" style="text-align: center;" >
<span style="color:#000000; font-size:18px; display: block; width:100%; height:auto;"><strong>Billing Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="leftColumnContent" style="text-align: center;">
<span style="font-size:14px; color: #000000!important;">{{ receipt.order.get_billing_html|safe }}</span>
</td>
</tr>
</table>
</td>
<td valign="top" width="50%" class="templateColumnContainer">
<table border="0" cellpadding="5" cellspacing="0" width="100%">
<tr>
<td class="rightColumnContent" style="text-align: center;">
<span style="font-size:18px; color:#000000; text-align:center; display: block; width:100%; height:auto;"><strong>Shipping Information</strong></span>
</td>
</tr>
<tr>
<td valign="middle" class="rightColumnContent" style="text-align: center;">
<span>
Shipping Address
</span>
<br><span style="font-size:14px; color: #000000!important;">Shipping speed description
{% endif %}
{% if receipt.order.shipper_tracking_number %}
<br><strong style="color: #000000;!important">Tracking: </strong>Shipper Name</span><br>
<a href="shipping tracking number" target="_blank" style="color: #000000; font-size: 14px;">
</a>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Found the answer in post: HTML CSS How to stop a table cell from expanding
Using style="overflow-wrap: break-word;" on the <td> solved my problem. It is compatible across Gmail, Apple Mail, Yahoo, latest Outlook.
The below images (Scenario A, Scenario B) are taken from GMAIL app for same newsletter. The only difference is the highlighted portion in Scenario B is an image. Ideally I want scenario B (its properly aligned and takes 600 px width), but how can I achieve it with text itself (as shown in Scenario A)?
The problem I am facing is its getting wrapped like a mobile layout and because of that the whole template width is getting reduced.
Scenario A Scenario B
The difference in code for Scenario A & Scenario B
Scenario A:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="47%" valign="middle" style="padding:10px 0 10px 20px">
<div>
<img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform.">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Scenario B:
<div style="background-color:#f6f4f5;padding:0;margin:0 auto;width:100%!important">
<div style="overflow:hidden;color:transparent;width:0;font-size:0;min-height:0">
</div>
<table width="100%" cellspacing="0" cellpadding="0" bgcolor="#f6f4f5" border="0" align="center" style="table-layout:fixed;font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td align="center">
<center style="width:100%">
<table width="580" cellspacing="0" cellpadding="0" border="0" bgcolor="#FFFFFF" style="margin:0 auto; max-width:580px; width:inherit; font-family:Helvetica,Arial,sans-serif">
<tbody>
<tr>
<td width="100%" bgcolor="#F3F3F3" style="background-color:#f6f4f5;padding:12px;border-bottom:1px solid #ececec">
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="font-weight:200;width:100%!important;font-family:Helvetica,Arial,sans-serif;min-width:100%!important">
<tbody>
<tr>
<td width="47%" valign="middle">
<div>
<a target="_blank" title="MyTechLogy" href="http://www.mytechlogy.com/"><img src="http://www.mytechlogy.com/view/images/MyTechLogy-Logo-TagLine-200.png" border="0" style="display:block;border:none;outline:none;text-decoration:none" title="MyTechLogy" alt="MyTechLogy"></a>
</div>
</td>
<td align="left" width="340" valign="middle" style="padding:10px 0 10px 10px">
<div> <span style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">Your Online Professional<br />IT Career Development Platform.</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="30" style="padding-left: 20px; font-family:Helvetica,Arial,sans-serif; font-size:16px; color:#ffffff;line-height:20px;vertical-align:middle;text-align:left;"><strong><span style="text-align:left;">Weekly Highlights from the Analytics Corner</span></strong></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:20px; padding-bottom:5px;padding-left:20px; padding-right:10px">
<strong><span style="color:#29acc8;">Tips to ace your Data Analytics Interview</span></strong>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:0px; padding-left:20px; padding-right:10px">
I test drove the new Career Initiative feature at MyTechlogy and was pretty impressed by the kind of insights it threw up overnight. I think young professionals in data analytics or data science will find it helpful if they're looking for data that will help them make a decision about their own careers.. <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#29acc8;">Read more >></span>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#29acc8; line-height:28px; vertical-align:middle; padding-top:10px; padding-bottom:5px; padding-left:20px; padding-right:10px">
<strong><span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;">Career Switch to Analytics?</span> <span style="font-family:Helvetica,Arial,sans-serif;font-size:14px;color:#333333;line-height:28px;"><span style="color:#29acc8;">See which IT skills can help you get there >></span></span></strong>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle; ">
<td width="100%" height="10" ></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<div align="center">
<table align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" width="560">
<tbody>
<tr>
<td width="560px" align="left" valign="middle" height="60" style=" text-align:left; background-color:#29acc8; font-size:21px; font-family:Helvetica, arial, sans-serif; color:#ffffff; font-weight: 300; padding-left:10px;">
<span style="color: #ffffff; font-weight: 400;text-align:left">
<strong>IT Career Progression made easier with MyTechLogy</strong>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#ffffff" align="center" width="560">
<tbody>
<tr valign="middle" style="vertical-align:middle;">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr valign="middle" style="vertical-align:middle">
<td align="left" width="560" valign="middle" style="font-family:Helvetica,Arial,sans-serif; font-size:14px; color:#000000; line-height:20px; vertical-align:middle; padding-top:5px; padding-bottom:10px; padding-left:20px; padding-right:10px">
MyTechlogy provides personalized insights from industry data to help you stay relevant and to progress your IT career.
</td>
</tr>
<tr valign="middle" style="vertical-align:middle; ">
<td align="center" valign="middle" style="vertical-align:middle; ">
<a target="_blank" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><img width="540" border="0" height="163" alt="IT career progression has been made easier with MyTechLogy" style="display:block; border:none; outline:none; text-decoration:none;" src="http://www.mytechlogy.com/upload/by_users/Bharath/181605050426CareerProgression.png" class="bigimage"></a>
</td>
</tr>
<tr>
<td width="100%" height="10"></td>
</tr>
<tr>
<td>
<div align="center">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes">
<table height="60" align="center" valign="middle" border="0" cellpadding="0" cellspacing="0" class="tablet-button" st-button="edit">
<tbody>
<tr align="center">
<td width="auto" align="center" valign="middle" height="60" style=" background-color:#FF6600; border-top-left-radius:2px; border-bottom-left-radius:2px;border-top-right-radius:2px; border-bottom-right-radius:2px; background-clip: padding-box;font-size:22px; font-family:Helvetica, arial, sans-serif; text-align:center; color:#ffffff; font-weight: 300; padding-left:18px; padding-right:18px; box-shadow: 1px 5px 5px #888888;">
<span style="color: #ffffff; font-weight: 400;">
<a style="color: #ffffff; text-align:center;text-decoration: none;" href="http://www.mytechlogy.com/my-page/?create_initiative=yes"><strong>Create your Career Initiative Now!</strong></a>
</span>
</td>
</tr>
</tbody>
</table>
</a>
</div>
</td>
</tr>
<tr>
<td width="100%" height="30"></td>
</tr>
<tr>
<td>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#29acc8" align="center" width="580">
<tbody>
<tr valign="middle" style="vertical-align:middle">
<td width="100%" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="100%">
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#f6f4f5" align="center" width="580">
<tbody>
<tr>
<td align="left" valign="middle" style="font-family:Calibri,sans-serif;font-size:11px;color:#666666;line-height:15px; padding-left:10px;padding-right:10px;">
<div style="background-color:#f6f4f5;padding-top:20px;margin:0 auto;width:100%!important">
To unsubscribe from receiving this email into future, click <a target="_blank" style="text-decoration:none;color:#0db9ea" href="[UNSUBSCRIBEURL]">unsubscribe</a> </div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</center>
</td>
</tr>
</tbody>
</table>
Please help how can I solve this issue.
These td's should be placed within a table that's 600px wide and thát one should be placed within a table that's 100% wide.
Hope this helps. Otherwise, please post more of your code, so we can adjust it.
please use following code:
<table align=center" width="100%">
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px;font-family:Helvetica,Arial,sans-serif; font-size:20px; color:#333333; line-height:28px; vertical-align:middle;">
Your Online Professional<br />IT Career Development Platform.
</td>
<td align="left" width="48%" valign="middle" style="padding:10px 0 10px 10px"><img src="http://www.mytechlogy.com/upload/by_users/Bharath/241605103728ITcareerdevelopment.png" border="0" style="display:block; border:none; outline:none; text-decoration:none; height:60px;" title="Your Online Professional IT Career Development Platform." alt="Your Online Professional IT Career Development Platform."></td>
</table>
I have received a html block of code (email template so lots of tables) that I have to work with that has no spacing or indentation aand is essentially all on one line. It's a nightmare to try and edit it.
Does anyone know of any online tools or applications that you can copy and paste code into where it organises it for you?
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0" topmargin="0"> <!--//--> <table width="100%" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="100%" valign="top" bgcolor="#e5e5e5" align="center"> <table width="698" cellspacing="0" cellpadding="0" border="0"> <tr> <td width="5"><img hspace="0" height="1" width="5" src="http://info.page7media.ie/img/trans.gif" /></td> <td align="left"> <table width="688" cellspacing="0" cellpadding="0" border="0"> <tr> <td height="10"><a name="top_of_mail"></a></td> </tr> <tr> <td align="center"><font face="Arial, Helvetica, sans-serif" size="2" color="red" style="font-size: 12px; line-height: 17px;">If you are unable to see this message, click <a target="_blank" href="http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061" style="text-decoration: underline;"><font face="Arial, Helvetica, sans-seri
Try Dirty Markup, it cleaned this markup up nicely
http://www.dirtymarkup.com/
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0"
topmargin="0"> <!--//-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" style="background-color: #E5E5E5" valign="top"
width="100%">
<table border="0" cellpadding="0" cellspacing="0" width="698">
<tr>
<td width="5"><img height="1" hspace="0" src=
"http://info.page7media.ie/img/trans.gif" width=
"5"></td>
<td align="left">
<table border="0" cellpadding="0" cellspacing="0"
width="688">
<tr>
<td height="10">
<a id="top_of_mail" name=
"top_of_mail"></a>
</td>
</tr>
<tr>
<td align="center">
If you are unable to see this message,
click <a href=
"http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061"
style="text-decoration: underline;"
target="_blank"></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You're looking for something called a "beautifier".
Here's an online beautifier that supports HTML: http://ctrlq.org/beautifier/
I beautified it for you but noticed the beginning of your code sample is missing.
olor="#e5e5e5" alink="#000000" class="yfix" leftmargin="0" rightmargin="0" topmargin="0">
<!--//-->
<table width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="100%" valign="top" bgcolor="#e5e5e5" align="center">
<table width="698" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="5">
<img hspace="0" height="1" width="5" src="http://info.page7media.ie/img/trans.gif" />
</td>
<td align="left">
<table width="688" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="10">
<a name="top_of_mail">
</a>
</td>
</tr>
<tr>
<td align="center">
<font face="Arial, Helvetica, sans-serif" size="2" color="red" style="font-size: 12px; line-height: 17px;">
If you are unable to see this message, click
<a target="_blank" href="http://info.page7media.ie/u/gm.php?UID=JJ20yz3nz2&ID=279438389_478447_36061" style="text-decoration: underline;">
<font face="Arial, Helvetica, sans-seri
Use an online code formatter.
http://ctrlq.org/beautifier/
I grabbed the first one that looked interesting. There are others out there.
http://bit.ly/1Eqgeqr
I am experience a gap between the header and the body only in Outlook 2013. Below is a screen-shot to hot it looks in outlook:
Here is what it should look like:
My header HTML code:
<!-- start header -->
<table border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" align="center" width="580" style="font-family:Arial,Helvetica,sans-serif" >
<tr>
<td width="241" height="51" valign="top" height="51" style="line-height: 51px;">
<img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/logo.png" style="display:block;">
</td>
<td width="179" height="51" valign="top" bgcolor="#00b0ed" style="background:#00b0ed;" style="line-height: 51px;" ></td>
<td width="1" height="51" valign="top" style="line-height: 51px;" ></td>
<td width="159" height="51" valign="top" style=" text-align:center; font-size:14px; " style="line-height: 51px;" >
<table cellspacing="0" cellpadding="0" width="159" style="font-family:Arial,Helvetica,sans-serif; text-align:center;" border="0" height="51">
<tr>
<td width="159" align="left" valign="top" height="12" style="line-height:12px;" ><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/invitation.png" style="display:block;" height="12"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="5"></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="text-align:center; background:#00B0ED; " height="26" > <span style="color:#fff; text-decoration:none; font-weight:100; font-family:Arial,Helvetica,sans-serif; text-align:center; font-size:14px ">INVITATION</span></td>
</tr>
<tr>
<td width="159" align="left" valign="top" style="background:#00B0ED;" > <img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford-invitation-template/blank.png" style="display:block;" height="8"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%" align="left" valign="top" colspan="4" height="1"><img src="http://limus.dev.limusdesign.com/fordfoundation/emails/ford/images/blank.jpg" height='1' width="1" style="display:block;"></td>
</tr>
</table>
<!-- end header -->
This will probably help:
http://www.campaignmonitor.com/blog/post/3795/outlook-2013-says-no-to-empty-table-cells
Basically, it's a padding issue with outlook - and it's related to font sizing. That's quite an old problem from waaaay back in the day of table based website layouts and the old tricks of setting font size to 1px, or using nasty old 1x1px transparent gif files :)
Use this in your stylesheet
table { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;}
table td {border-collapse: collapse;}
And inline for each table declare
table border="0" cellpadding="0" cellspacing="0"
To get the 1 pixel white space between each cell use nested tables. and declare the table like so
table border="1" border-color="#ffffff" cellpadding="0" cellspacing="0"