2012-12-14 68 views
0

我需要幫助建立一個電子郵件時事通訊模板,因爲其中一列未正確顯示,包含標題2的列未正確顯示,而是顯示在頁面的右側與模板元素對齊。HTML電子郵件模板表幫助需要

下面是代碼:

<!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-->&nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
<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">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <!--Main Part Start-->&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
       <table border="0" align="center" cellpadding="0" cellspacing="0" style="width: 650px;"> 
        <tbody> 
         <tr> 
          <td align="left" valign="top">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <!--Header Part Start-->&nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 
           <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&rsquo;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;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
               <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;">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
               <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; 
                   <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">&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; <!--Banner Start-->&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 
               <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;">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
                   <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> 
               &nbsp; <!--Banner End--> &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;</td> 
             </tr> 
            </tbody> 
           </table> 

           <!--Header Part End--> &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;</td> 
         </tr> 
         <tr><!--Body Part Start--></tr> 
         <tr> 
          <td width="330" align="left" valign="top">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 1 Start-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
           <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;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
               <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> 
               &nbsp; &nbsp;</td> 
             </tr> 
            </tbody> 
           </table> 
           &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 1 End--> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> 
          <td width="320" align="left" valign="top">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 2 Start-->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
           <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;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
               <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> 
               &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> 
             </tr> 
            </tbody> 
           </table> 
           &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!--Two column 2 End--> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> 
         </tr> 
         <!--Two column Part End--> 
         <tr> 
          <td>&nbsp;</td> 
         </tr> 
        </tbody> 
       </table></td> 
      <!--Body Part End--></tr> 
     <tr><!--Footer Part Start--> 
      <td align="left" valign="top">&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; 
       <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">&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; 
           <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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
               <p align="center"><b>Copyright &copy; 2012 Company - Registered &amp; 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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
               <p align="center">Company Address<br /> 
                T: 023227 000 201 &nbsp;E: <a href="#">[email protected]</a> &nbsp;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">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
           <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--> &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; <!--Table Start--> 
</body> 
</html> 
+1

如果您知道哪一列顯示不正確,爲什麼要發佈整個頁面? –

+0

即時通訊不好意思,但我認爲這可能是解釋幫手解決我的問題的最佳方式。 –

+1

嘗試將發佈的代碼降低到問題仍然存在的地方。它會更具可讀性。 –

回答

1

你在你的代碼打開了很多<table>標籤,但他們都不是封閉的。這意味着如果您願意的話,每個表格將嵌套在它的parent-table中。

特別是所有那些對齊將失控。

我建議關閉表格標籤並刪除那些&nbsp;他們爲一些平均代碼。