I have tried multiple times to sort out the "Ghost table" for this email template to render in Outlook mobile and online to no success. For some reason it misaligns when printing into Outlook.
Desired look:
What I am getting (both Outlook online and mobile):
Code (This version contains no ghost tables to make it easier):
<tr> <td> <table width="100%"> <tr> <td> <p> First 3 Things To Try</p> <table align="left" width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td align="left"> <table width="150" border="0" cellspacing="0" cellpadding="0"> <tr> <!--[if (gte mso 9)|(IE)]> <td> <![endif]--> <td width="150" align="left"></td> <!--[if (gte mso 9)|(IE)]> </td> <![endif]--> </tr> </table> </td> </tr> </table> </td> </tr> <tr> <td> <table> <tr> <td width="80"> <img src="" width="50" height="50" alt=""> </td> <td width="370"> <p><strong>Setup Your Profile Picture</strong></p> </td> <td width="150"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" bgcolor="#007da5"> <a target="_blank" href="#" target="_blank">Learn More </a> </td> </tr> </table> </td> </tr> <tr> <td colspan="3"> <p>Its tough to tell who's behind the mask sometimes. Give us a chance to remember what your face looks like by adding a profile picture to your account. Upon setting up your profile picture, within 48 hours it will be seen across all Office 365 products, including Teams and Outlook. Please select a work-appropriate photo.</p> </td> </tr> </table> <table> <tr> <td width="80"> <img src="" width="50" height="50" alt=""> </td> <td width="370"> <p><strong>Get Setup On Your Mobile</strong></p> </td> <td width="150"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td align="center" bgcolor="#007da5"> <a target="_blank" # " target="_blank ">Learn More </a> </td> </tr> </table> </td> </tr> <tr> <td colspan="3 "> <p>With Teams and Outlook mobile apps now available to all staff, it is possible to stay in touch, even when on the go. Follow the link to see how to get setup for both Android and iPhone devices. Link best viewed on a computer.</p> </td> </tr> </table> <table> <tr> <td width="80 "> <img src=" " width="50 " height="50 " alt=" "style="border-width:0;width:100%;max-width:50px;max-height:50;padding-right:10px; "> </td> <td width="370 "> <p><strong>Explore!</strong></p> </td> <td width="150 "> <table border="0 " cellpadding="0 " cellspacing="0 "> <tr> <td align="center " bgcolor="#007da5 "> <a target="_blank "href="# " target="_blank ">Learn More </a> </td> </tr> </table> </td> </tr> <tr> <td colspan="3 "> <p>With office 365 there are tons of new features across all applications that will make your workday experience easier and more efficient. Head to Halton's Office 365 hubpage to begin exploring all the features offered. Link best viewed on a computer </p> </td> </tr> </table> </td> </tr> </table> </td> </tr>Any help is greatly appreciated.
31 Answer
This will have to be more of a 'try these things' answer since there may be multiple issues.
First, I've never had any luck with colspans (or rowspans). Edit them out by nesting a new table in there.
Second, it may be that Outlook is running out of space. You've got min-widths of 600px, and padding as well. You usually only have 600px on desktops, and on mobiles, it's more like 300px. <td> elements will expand to the size necessary automatically, so if it doesn't need to be a specific width (your icon and buttons will need to be), then don't set it.
Third, you've ghost tables incorrectly. You only need them to fix something that Outlook (desktop) doesn't recognise, like max-width (and I probably min-width, but I've never needed to use that). It needs to be semantically correct, so this construction:
<!--[if (gte mso 9)|(IE)]> <td> <![endif]--> <td width="150" align="left"></td> <!--[if (gte mso 9)|(IE)]> </td> <![endif]--> Will render two <td> elements straight after each other. If you want something different for non-Outlook desktops, then use this:
<!--[if !mso]>--> <td width="150" align="left"></td> <!--<![endif]--> Fourth, consider what you want the layout to look like under a 300px viewport width. That may totally mess with your construction. But you can use @media screen and (max-width:600px) in a <style> section to set different styles for mobile (notwithstanding limitations on some versions of Gmail app, namely, Gmail IMAP/POP).
Fifth, buttons are a whole extra beast. I'm not going to answer it here since it deserves it's own question. Essentially, Outlook won't change an inline element to inline-block or block (or vice-versa). You have to style a <td> section and the <a> just gets colour and text-decoration.
