How to code email newsletters with 3 or more columns

Sometimes we have 3 or more columns and though it doesn't look like a big deal at the beginning we will find soon enough is not that easy. I will show you today 2 methods on how to code using tables or table headers.

Firstly let's look at how can we do this with tables. The challenge here is the extra margins Outlook creates automatically around tables so if you put all 3 tables left aligned with no spacing in between you will end up with some tables being pushed underneath instead of all displaying on the same line. Luckily there is a conditional comment we can use to fix that.Oh, old days of IE6 translated in emails!

So let's get down and dirty with some code. Here are our 3 tables:

<table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
   <tr>
      <td><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat1.jpg" width="200" class="fluid" alt="first cat"/></td>
   </tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
   <tr>
      <td><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat5.jpg" width="200" class="fluid" alt="second cat"/></td>
   </tr>
</table>
<table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
   <tr>
      <td><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat3.jpg" width="200" class="fluid" alt="third cat"/></td>
   </tr>
</table>

As you can see each table is 200px wide to make a total of 600px, the width of our email newsletter.

As we said at the beginning of this tutorial, we need to add Outlook conditional comments to make it work. Below is the full html code, no CSS needed:

<table width="600" border="0" cellspacing="0" cellpadding="0" align="center">
   <tr>
      <td>
         <table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
            <tr>
               <td><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat1.jpg" width="200" class="fluid" alt="first cat"/></td>
            </tr>
         </table>
         <!--[if mso]> 
      </td>
      <td valign="top">
         <![endif]--> 
         <table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
            <tr>
               <td><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat5.jpg" width="200" class="fluid" alt="second cat"/></td>
            </tr>
         </table>
         <!--[if mso]> 
      </td>
      <td valign="top">
         <![endif]--> 
         <table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
            <tr>
               <td><img style="display:block; border:none;" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat3.jpg" width="200" class="fluid" alt="third cat"/></td>
            </tr>
         </table>
      </td>
   </tr>
</table>

So what did we do here? We closed and reopened the TD so for Outlook you will have 3 TD columns each with a table inside. While this will definitely  work in Outlook desktop, does it work in the Outlook mobile app the same?

As you can see in the bellow screenshot from my Samsung it surely works. The 3 tables will display inline identical on both desktop and mobile:

Let's try to stack the tables now. We will use table headers <th> this time and we will have the tables in <th>. No need for Outlook conditional comments anymore.

As I already mentioned in a different article, we can stack TH without problems. To do that you will need this in the head CSS for desktop:

th {padding:0 !important; vertical-align:top !important;} /*for stackable THs instead of tables*/

and this in the mobile:

th {display:block !important; width:100% !important;}/*for stackable THs instead of tables*/

The best part about stacking table headers comparing to stacking tables is that we don't need to be concerned about spacing around tables that will break badly in email clients like Outlook. Also we can make the images to span to the full width of the screen in the Gmail app displaying responsive using width="100%" on the wrapping table and  width:100%; max-width:100% on the images we want to display responsive in the Gmail app.

Here is the full code 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
   xmlns:o="urn:schemas-microsoft-com:office:office">
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <!--[if gte mso 9]>
      <xml>
         <o:OfficeDocumentSettings>
            <o:AllowPNG/>
            <o:PixelsPerInch></o:PixelsPerInch>
         </o:OfficeDocumentSettings>
      </xml>
      <![endif]-->
      <style type="text/css">
         /* START Vic's */
         /* boilerplate reset */ 
         img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic;} /* interpolation forces IE to smoothly render resized images. */
         a img {border:none;} 
         th {padding:0 !important; vertical-align:top !important;} /*for stackable THs instead of tables*/
         @media only screen and (max-width: 599px){
         table {width:100% !important; background:#ffffff !important; min-width:100% !important;} /*force white background on tables on some versions of android*/
         img[class="fluid"] {max-width:100% !important;width:100% !important;height: auto !important;-ms-interpolation-mode: bicubic !important;} /*no breaking points for responsive but fluid images*/
         th {display:block !important; width:100% !important;}/*for stackable THs instead of tables*/ 
         }
         /* END Vic's */
      </style>
   <body>
      <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
         <tr>
            <td style="border-collapse:collapse;">
               <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; margin-left:auto !important; margin-right:auto !important; width:640px;" width="640" border="0" cellspacing="0" cellpadding="0" align="center">
                  <tr>
                     <td style="border-collapse: collapse;" width="20"></td>
                     <td style="border-collapse: collapse;" width="600">
                        <table style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
                           <tr>
                              <th>
                                 <table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
                                    <tr>
                                       <td><img style="display:block; border:none; width:100%; max-width:100%" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat1.jpg" width="200" class="fluid" alt="first cat"/></td>
                                    </tr>
                                 </table>
                              </th>
                              <th>
                                 <table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
                                    <tr>
                                       <td><img style="display:block; border:none; width:100%; max-width:100%" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat5.jpg" width="200" class="fluid" alt="second cat"/></td>
                                    </tr>
                                 </table>
                              </th>
                              <th>
                                 <table width="200" border="0" cellspacing="0" cellpadding="0" align="left">
                                    <tr>
                                       <td><img style="display:block; border:none; width:100%; max-width:100%" src="http://emailsnob.com/bl-content/uploads/pages/d7153fe807bfc8c8ca04dc019dbba96e/cat3.jpg" width="200" class="fluid" alt="third cat"/></td>
                                    </tr>
                                 </table>
                              </th>
                           </tr>
                        </table>
                     </td>
                     <td style="border-collapse: collapse;" width="20"></td>
                  </tr>
               </table>
            </td>
         </tr>
      </table>
   </body>
</html>

This is result on how coding tables side by side using the stackable method with table headers in email newsletters will render in the native email clients on mobile and in the Gmail app:

I hope this blog article helps you find out the best you can tackle your email coding when it comes to code multiple inline tables. Reach out in the comments if you need help.

Happy email coding! Your friend, the email snob.