HTML Email template Table help needed
- by user1870691
I need help setting up an email newsletter template as one of the columns is not being displayed properly, the column containing heading 2 is not being displayed properly it is being displayed towards right side of the page instead of aligning with the template elements.
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<!--Table Start-->
<table border="0" align="center" cellpadding="0" cellspacing="0" class="cont-bg" bgcolor="#f1f1f1" style="background-color: #f1f1f1; padding: 27px 0px 0px; width: 100%; background-position: initial initial; background-repeat: initial initial;">
<tbody>
<tr>
<td align="center" valign="top" width="1133"> <!--Main Part Start-->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px;">
<tbody>
<tr>
<td align="left" valign="top"> <!--Header Part Start-->
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px; height: 682px;">
<tbody>
<tr>
<td colspan="2" align="right" valign="top" mc:edit="view" style="font: normal 12px arial, helvetica, sans-serif; color: #000000; padding-bottom: 22px;">You can’t see this email?<a href="#"> View it in your browser.</a></td>
</tr>
<tr><!--Logo Start-->
<td width="287" align="left" valign="top" bgcolor="#ffffff" style="background: #fff;">
<p align="left"><br /> <img src="commstellogo.png" width="208" height="45" border="0" align="left" /></p>
</td>
<!--Logo End--><!--Menu Part Start-->
<td width="363" height="94" align="left" valign="middle" bgcolor="#ffffff" style="background: #fff;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 340px;">
<tbody>
<tr>
<td align="right" valign="top" mc:edit="date" style="font: bold 18px arial, helvetica, sans-serif; color: #2f2f2f; text-transform: uppercase; padding-bottom: 8px;">01727 260 101</td>
</tr>
<tr>
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" style="width: 340px;">
<tbody>
<tr>
<td width="16" align="left" valign="top"><img mc:edit="h-icin" src="images/home-icon.png" width="16" height="19" alt="" /></td>
<td width="64" align="left" valign="middle" mc:edit="h-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#" style="color: #414141;">Home</a></td>
<td width="16" align="left" valign="top"><img mc:edit="s-icon" src="images/setting.png" width="16" height="19" alt="" /></td>
<td width="79" align="left" valign="middle" mc:edit="s-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#" style="color: #414141;">Services</a></td>
<td width="16" align="left" valign="top"><img mc:edit="a-icon" src="images/about-us.png" width="16" height="19" alt="" /></td>
<td width="77" align="left" valign="middle" mc:edit="a-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#" style="color: #414141;">About us</a></td>
<td width="18" align="left" valign="top"><img mc:edit="s-icon" src="images/support.png" width="16" height="19" alt="" /></td>
<td width="54" align="right" valign="middle" mc:edit="s-text" style="font: bold 12px arial, helvetica, sans-serif; color: #414141; padding-left: 9px;"><a href="#">Contact</a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<!--Menu Part End--></tr>
<tr>
<td colspan="2" align="left" valign="top" height="548"> <!--Banner Start-->
<table border="0" cellspacing="0" cellpadding="0" style="width: 650px;">
<tbody>
<tr>
<td align="left" valign="top"><img mc:edit="banner-image" src="#" width="649" height="356" alt="" style="display: block;" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 25px 0px 18px 20px; background: #2f2f2f;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 611px;">
<tbody>
<tr>
<td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 8px;">Heading Area</td>
</tr>
<tr>
<td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Vivamus interdum mauris urna. Nullam egestas augue elit. Aliquam pretium elit varius metus hendrerit volutpat. <b>20% off</b> Vivamus interdum mauris urna. Nullam egestas augue elit. Aliquam pretium elit varius metus hendrerit volutpat.</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#><img mc:edit="banner-read-more" src="#" width="128" height="31" alt="" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Banner End--> </td>
</tr>
</tbody>
</table>
<!--Header Part End--> </td>
</tr>
<tr><!--Body Part Start--></tr>
<tr>
<td width="330" align="left" valign="top"> <!--Two column 1 Start-->
<table border="0" cellspacing="0" cellpadding="0" style="width: 320px;">
<tbody>
<tr>
<td align="left" valign="top"><img mc:edit="two-coulmn-image1" src="businesstelephone.png" width="320" height="172" alt="" style="display: block;" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 15px 0px 18px 20px; background: #2f2f2f;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 288px;">
<tbody>
<tr>
<td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 5px;">Heading 2</td>
</tr>
<tr>
<td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Praesent viverra dui in orci pulvinar convallis. Nunc interdum, metus eget adipiscing rutrum, leo quam accumsan tellus, eget . It's easy and hassle free!</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#"><img mc:edit="read-more" src="#" width="128" height="31" alt="" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Two column 1 End--> </td>
<td width="320" align="left" valign="top"> <!--Two column 2 Start-->
<table border="0" cellspacing="0" cellpadding="0" style="width: 320px;">
<tbody>
<tr>
<td align="left" valign="top"><img mc:edit="two-coulmn-image2" src="mobiles.png" width="320" height="172" alt="" style="display: block;" /></td>
</tr>
<tr>
<td align="left" valign="top" bgcolor="#2f2f2f" style="padding: 15px 0px 18px 20px; background: #2f2f2f;">
<table border="0" cellspacing="0" cellpadding="0" style="width: 288px;">
<tbody>
<tr>
<td align="left" valign="top" mc:edit="banner-title" style="font: normal 24px arial, helvetica, sans-serif; color: #fff; padding-bottom: 5px;">Heading 3</td>
</tr>
<tr>
<td align="left" valign="top" mc:edit="banner-text" style="font: normal 12px arial, helvetica, sans-serif; color: #fff; line-height: 18px; padding: 0px 0px 12px 4px;">Nunc vel massa metus, vel varius mi. Sed sagittis consectetur nisi, sed imperdiet ipsum interdum non. Nunc consectetur odio et turpis eleifend semper. Pellentesque lorem purus</td>
</tr>
<tr>
<td align="left" valign="top"><a href="#"><img mc:edit="read-more-1" src="images/read-more.png" width="128" height="31" alt="" /></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--Two column 2 End--> </td>
</tr>
<!--Two column Part End-->
<tr>
<td> </td>
</tr>
</tbody>
</table>
</td>
<!--Body Part End--></tr>
<tr><!--Footer Part Start-->
<td align="left" valign="top">
<table border="0" cellspacing="0" cellpadding="0" style="width: 687px;">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="background: #fff; padding: 28px 0px 27px 0px;" width="687">
<table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 675px;">
<tbody>
<tr>
<td align="center" valign="top" mc:edit="un-sp-text" style="font: normal 12px arial, helvetica, sans-serif; color: #737373; line-height: 18px;" width="675">
<p align="center"><b>Copyright © 2012 Company - Registered & Dales 07765116</b></p>
</td>
</tr>
<tr>
<td align="center" valign="top" mc:edit="c-right-text" style="font: bold 12px arial, helvetica, sans-serif; color: #737373; line-height: 18px;" width="675">
<p align="center">Company Address<br /> T: 023227 000 201 E: <a href="#">[email protected]</a> W: <a href="#">company</a></p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top" style="padding: 20px 0px 35px 0px;" width="687">
<p align="center">If you wish to unsubscribe from this email, please click here</p>
</td>
</tr>
</tbody>
</table>
</td>
<!--Footer Part End--></tr>
</tbody>
</table>
<!--Main Part End--> <!--Table Start-->
</body>
</html>
