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

Question

我正在尝试通过 python 将一些 HTML 代码附加到 Outlook 电子邮件中。我的问题是围绕 html 和前景。我正在尝试使用下面的代码并制作两个垂直对齐的表格。当我单独使用 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 之外，我对这种格式的建议是使用 tables 进行布局（这与我的 "religion " 相悖，但这是唯一可靠的解决方案）。创建一个 table 一行两列，无格式，宽度为 100%。在每一列中放置一个 table 就可以了！

您的 html 需要修复许多地方，例如两个没有样式且没有关闭的开始 table 标签，但这是解决您在任何邮件客户端上的问题的唯一方法

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

HTML tables won't align properly in Outlook

html

python

outlook

html-email