CODEWITHSUNDEEP
pythonhtmloutlookhtml-email
Trying_hard
Trying_hard

Reputation: 9501

HTML tables won't align properly in Outlook

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>

Upvotes: 0

Views: 1706

Answers (2)

Rob S.
Rob S.

Reputation: 1146

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>

Upvotes: 1

Lelio Faieta
Lelio Faieta

Reputation: 6688

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

Upvotes: 0

Related Questions