HTML tables won't align properly in Outlook

Question

I am trying to attach some HTML code to an outlook email via python. My question is surrounding the html and outlook. I am trying to use the code below and make two tables that are aligned vertically. When I have the html code by itself it works fine, but when I mail it to outlook the tables are one on top of each other. Any thoughts on why this is happening.

<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>

Rob S. · Accepted Answer · 2015-08-07T21:36:36.293

Your syntax is bad on lines 10 & 11 and 24 & 25. Try the following and let me know if it works better.

<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>

Thanks for the correction. However when I send it in outlook still get one table on top of the other. – — Trying_hard, Aug 07 '15 at 21:11
Edit: I wrapped your two tables in another table of one row to force both tables to a single row. Does this solution work? — Rob S., Aug 07 '15 at 21:38

score 0 · Answer 2 · answered Aug 07 '15 at 21:21

0

Besides fixing your html my suggestion for this kind of formatting is to use tables for layout (it's against my "religion " but it's the only bulletproof solution). Create a table with one row and two columns with no formatting and width 100%. In each column place one of the tables and you get it!

Your html need to be fixed in many places like the two opening table tags with no styles and no closing but this is the only way to solve your problem on any mail client

answered Aug 07 '15 at 21:21

Lelio Faieta

6,457
7
40
74

Thanks. I am still trying to get the html right. Are you able to provide and example at all. As you can tell I am not that strong at HTML – Trying_hard Aug 07 '15 at 21:38

HTML tables won't align properly in Outlook

2 Answers2