In the last lesson we learned how to build Responsive HTML Email Tables, but our code will need “Conditional Statements” in order for our responsive columns to render properly in email clients such as Microsoft Outlook on Windows.

What Are Conditional Statements?

Conditional statements are comprised of “if” statements that dictate whether or not the action inside of the statement should be executed in your code.  In our case, with HTML email template building, the if statement is checking to see if a certain email client or web browser is rendering the output of our email template design.

For best practices, it’s important to select the right syntax for your “if statement” to make sure you can target all of the email client versions that will need help with rendering your responsive tables.  Stack Overflow has a great resource covering how to target specific versions of Microsoft Outlook with different syntaxes, but after much testing I can recommend one that covers the entire spectrum of email clients:

<!--[if (gte mso 9)|(IE)]>
<![endif]-->

So what this says that if the email client is Outlook 2000 (gte mso 9) or (|) Internet Explorer (IE) then apply the following code.  With this if statement does is it assures us that Outlook versions as old as Outlook 2000 and newer will apply the code in our conditional statement in addition to Internet Explorer which is known as a troublesome web browser when it comes to rendering code.

Ghost Tables

Now that we have the if statement sorted out for our conditional statement, we can add the code we need Outlook to render for us.  To do these we’ll add something called “Ghost Tables” to create a new set of tables for Outlook since it won’t render the CSS we used (display: inline-block;) to make our tables responsive in the previous lesson.

For example, before the start of the table which we gave the class “column” to, we would set the width of the table to 100%, the <td> tag to the 300px column width, and use the “valign” attribute with it’s “top” value in place of “vertical-align: top;”.

<!--[if (gte mso 9)|(IE)]>
  <table width="100%" style="border-spacing: 0;">
  <tr>
  <td width="300" valign="top" style="padding: 0;">
<![endif]-->

Then in between our two HTML table columns we would add a conditional statement the ends the first <td> table data tag with it’s width of 300px and start a new one:

<!--[if (gte mso 9)|(IE)]>
  </td><td width="300" valign="top" style="padding: 0;">
<![endif]-->

Lastly, after the HTML for our second 300px width column we can close the open tags that remain inside of a third conditional statement:

<!--[if (gte mso 9)|(IE)]>
  </td>
  </tr>
  </table
<![endif]-->

Now with our two column layout surrounded by these three conditional statements they will have no trouble rendering in Outlook!