2017-08-21 30 views
-5

我正在嘗試創建一個HTML電子郵件,因此使用了大量的嵌套表格。但是,我的第二個<tr>與第一行不在同一行,我不太清楚爲什麼。下面是它現在是如何出現的: enter image description hereHTML表格不按預期方式渲染

我希望第二行被居中而不是觸及邊緣。

這是我有:

\t \t <!-- BACKGROUND --> 
 
\t \t <table cellpadding="0" cellspacing="0" border="0" width="100%" bgcolor="#000000"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <!-- SECTION 1 --> 
 
\t \t \t \t \t \t <!--START OF EMAIL BODY --> 
 
\t \t \t \t \t \t <table cellpadding="0" cellspacing="0" border="0" width="600" align="center"> 
 
\t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t <table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#ffffff"> 
 
\t \t \t \t \t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td height="30"><!-- PADDING --></td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="font-family:Arial;font-size:12px;line-height:15px;color:#353535;text-align:center;"> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t Not rendering correctly? View this email as a web page <a href="#" target="_blank" style="color:#54537e;">here</a>. 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t \t <td height="15"><!-- PADDING --></td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t <!--END OF EMAIL BODY --> 
 
\t \t \t \t \t \t <!-- SECTION 1 END --> 
 
\t \t \t \t \t </td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td> 
 
\t \t \t \t \t \t <!-- SECTION 2 --> 
 
\t \t \t \t \t \t <!-- LOGO AND SOCIAL MEDIA --> 
 
\t \t \t \t \t \t <table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF"> 
 
\t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t <td><!-- <td height="60">--> 
 
\t \t \t \t \t \t \t \t \t \t <table cellpadding="0" cellspacing="0" border="0"> 
 
\t \t \t \t \t \t \t \t \t \t \t <tbody> 
 
\t \t \t \t \t \t \t \t \t \t \t \t <tr> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td width="425"><!-- PADDING --></td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td style="font-family:Arial;font-size:10px;line-height:15px;color:#353535;text-align:center;font-weight:bold;">SHARE 
 
                </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td width="10"><!-- PADDING (SPACE BETWEEN SHARE AND LINKS) --></td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <!-- LINKEDIN--> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <!-- TWITTER --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </td> \t 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <!-- YOUTUBE --> 
 
\t \t \t \t \t \t \t \t \t \t \t \t \t <td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </td> 
 
\t \t \t \t \t \t \t \t \t \t \t \t </tr> 
 
\t \t \t \t \t \t \t \t \t \t \t </tbody> 
 
\t \t \t \t \t \t \t \t \t \t </table> 
 
\t \t \t \t \t \t \t \t \t \t <!-- SECTION 2 END --> 
 
\t \t \t \t \t \t \t \t \t </td> 
 

 
\t \t \t \t </tr> 
 
\t \t \t </tbody> 
 
\t \t </table>

+3

請閱讀[我的網站上的某些內容不起作用。我可以只粘貼一個鏈接嗎?](http://meta.stackoverflow.com/questions/125997/something-on-my-web-site-doesnt-work-can-i-just-paste-a-link -to-IT)。當外部資源消失或者固定時,依賴於外部資源被理解的問題變得毫無用處。創建一個[MCVE]並將其置於**問題本身**中。 – Quentin

+0

不要將行與一行的內容混淆。 – Quentin

回答

1

沒有什麼錯的行的對齊方式。

什麼是misaligned是兩個表裏面的行。

比較:

<!--START OF EMAIL BODY --> 
<table cellpadding="0" cellspacing="0" border="0" width="600" align="center"> 
<!-- LOGO AND SOCIAL MEDIA --> 
<table cellpadding="0" cellspacing="0" border="0" width="600" bgcolor="#FFFFFF"> 

其中之一的中心。另一個左對齊。