HTML表格在Outlook中无法正确对齐

Question

我正在尝试通过python将一些HTML代码附加到Outlook电子邮件中。 我的问题是围绕HTML和Outlook。 我正在尝试使用下面的代码，并使两个表垂直对齐。 当我自己拥有html代码时，它可以很好地工作，但是当我将其邮寄到Outlook时，这些表是彼此重叠的。 关于为什么发生这种情况的任何想法。

<html>
<head>  
    <title>tester</title>
 </head>
 <body> 
 <table> 
 <table style="border:1px solid black;border-collapse:collapse;float:left;margin:10px">  
    <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">First</th>  
    <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">last</th>  
    <tr bgcolor="#FFFFFF" style ="height:23px;">    
        <td style="border:1px solid black;padding:3px" align="left"><code> </code></td>    
        <td style="border:1px solid black;padding:3px" align="right"><code> </code></td>  
    </tr>  
    <tr bgcolor="#FFFFFF">    
    <td style="border:1px solid black;padding:3px" align="left"><code>Bob</code></td>    
    <td style="border:1px solid black;padding:3px" align="left"><code>Smith</code></td>  
    </tr>  
</table>
<table> 
 <table style="border:1px solid black;border-collapse:collapse;float:left;margin:10px">  
    <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">First</th>  
    <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">last</th>  
    <tr bgcolor="#FFFFFF" style ="height:23px;">    
        <td style="border:1px solid black;padding:3px" align="left"><code> </code></td>    
        <td style="border:1px solid black;padding:3px" align="right"><code> </code></td>  
    </tr>  
    <tr bgcolor="#FFFFFF">    
    <td style="border:1px solid black;padding:3px" align="left"><code>Stevev</code></td>    
    <td style="border:1px solid black;padding:3px" align="left"><code>Clarck</code></td>  
    </tr>  
</table>
</body>
</html>

Answer 1

您的语法在第10和11行以及第24和25行是错误的。请尝试以下操作，让我知道它是否更好。

 <html> <head> <title>tester</title> </head> <body> <table width="100%"> <tr> <td> <table style="border:1px solid black;border-collapse:collapse;float:left;margin:10px"> <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">First</th> <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">last</th> <tr bgcolor="#FFFFFF" style ="height:23px;"> <td style="border:1px solid black;padding:3px" align="left"><code> </code></td> <td style="border:1px solid black;padding:3px" align="right"><code> </code></td> </tr> <tr bgcolor="#FFFFFF"> <td style="border:1px solid black;padding:3px" align="left"><code>Bob</code></td> <td style="border:1px solid black;padding:3px" align="left"><code>Smith</code></td> </tr> </table> </td> <td> <table style="border:1px solid black;border-collapse:collapse;float:left;margin:10px"> <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">First</th> <th style="border:1px solid black;padding:3px" bgcolor="#DDDDDD" align="left">last</th> <tr bgcolor="#FFFFFF" style ="height:23px;"> <td style="border:1px solid black;padding:3px" align="left"><code> </code></td> <td style="border:1px solid black;padding:3px" align="right"><code> </code></td> </tr> <tr bgcolor="#FFFFFF"> <td style="border:1px solid black;padding:3px" align="left"><code>Stevev</code></td> <td style="border:1px solid black;padding:3px" align="left"><code>Clarck</code></td> </tr> </table> </td> </tr> </table> </body> </html> 

Answer 2

除了修复您的html之外，我对这种格式的建议是使用表格进行布局（这与我的“宗教”背道而驰，但这是唯一的防弹解决方案）。 创建具有一行和两列且无格式且宽度为100％的表。 在每一列中放置一张表格，就可以了！

您的html需要在很多地方固定，例如两个没有样式和关闭的开头表格标签，但这是解决任何邮件客户端问题的唯一方法