14

I am trying to float: left some tables, but just encountered a major problem, outlook doesn't support float. Well, then I tried to use table align and so forth, but without luck. The tables just show up, under each other, instead of beside each other. Anything one can do about this?

PS: it works on other devices just fine, its only Outlook, and I can't give each table a td, since it will break some other stuff.

markup:

<table class="products">
   <tr>
      <td align="left" class="test">
         <!-- Product 1  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 2  -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <!-- Product 3 -->
         <table align="center">
            <tr>
               <td class="product">
                  <a href="#">
                     <img src="#"/>
                  </a>
               </td>
            </tr>
         </table>
         <span class="clear"></span>    
      </td>
   </tr>
 </table>
1

6 Answers 6

31

Set your widths on each aligned table using width="", not CSS.

An example that works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    table td { border-collapse: collapse; }
    .msoFix { mso-table-lspace:-1pt; mso-table-rspace:-1pt; }
  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">


<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <div style="max-width:640px !important;">

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#CCCCCC">
          <tr>
            <td width="15" bgcolor="454545">&nbsp;</td>
            <td width="290" bgcolor="454545" align="left" style="padding: 0px;">&nbsp;<br>Table 1<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="454545">&nbsp;</td>
          </tr>
        </table>

        <table class="msoFix" width="320" cellpadding="0" cellspacing="0" align="left" bgcolor="#EEEEEE">
          <tr>
            <td width="15" bgcolor="959595">&nbsp;</td>
            <td width="290" bgcolor="959595" align="left" style="padding: 0px;">&nbsp;<br>Table 2<br>...<br>&nbsp;
            </td>
            <td width="15" bgcolor="959595">&nbsp;</td>
          </tr>
        </table>

      </div>
    </td>
  </tr>
</table>

</body></html>

Also, Outlook puts a 4-5 pixel gap between the aligned tables. Adding this trims it down to about 1px:

<style type="text/css">
   .msoFix {
      mso-table-lspace:-1pt;
      mso-table-rspace:-1pt;
   }
</style>

To get rid of it completely, you'll have to add borders to your tables (another Outlook quirk hack).

1
  • 2
    This didn't work for me in Outlook 2013 (to remove the added white space from ALIGN="LEFT" tables), but just adding ALIGN="LEFT" to the IMG tag itself totally worked fine in Outlook... which is wild.
    – HBlackorby
    Commented Dec 16, 2014 at 23:14
5

Just put every sub-table into an own td of the outer table. as the td's are besides each other, the tables will be too.

When trying to create HTML-EMails, Code like it’s 1997.

2
  • but, when the site get narrower, will it then jump down? and will it be possible to center each one on the screen, when on mobile? Cause when they are below each other, each in its own td, i dont think its possible to center them on the screen?
    – Teilmann
    Commented Jul 16, 2013 at 10:34
  • 1
    no, they will be besides each other on every screen. sadly, you can't do much to avoid this - HTML-rendering in EMail-Clients is often worse than IE6...
    – oezi
    Commented Jul 16, 2013 at 10:36
2

If you can live with having the 2 tables not "responding" (one under each other) in Outlook, this worked for me:

........
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
<![endif]--> 

<!-- table 1 goes here -->

<!--[if gte mso 9]>
    </td>
    <td>
<![endif]-->

<!-- table 12 goes here -->

<!--[if gte mso 9]>
   </td>
  </tr>
</table>
<![endif]-->
........
1

It seems Outlook.com filters out float attributes completely, but does support display: inline-block.
Of course, this will most likely break your tables, as they depend on display:table, but it might help you with any divs.

1

Use some online resources such as:

How To Code HTML Emails

When it comes to rendering HTML, most email clients are primitive and will break a lot of well formed HTML elements.

The following discussion may be helpful:

What guidelines for HTML email design are there?

Some basic tips:

  • Use tables for layout.
  • Set your widest table to be maximum of 600px wide.
  • Don't try and use JavaScript or Flash
  • Don't use CSS in a style tag as some mail clients will discard it.
  • Use inline CSS styles only.
0

I know it's been long since the OP posted this question, but I hope it helps anyone who needs it.

If you need a 2 column layout, and you want it to work in Outlook as well, then provide a width of around 45% for each table (to be safe, throw in a align="left" too in there). If you specify the width as 50%, Outlook (which has a mind of its own) would render it as a single column.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.