table[align] ignores parent td's vertical alignment in The Outlooks on Windows

[jkupczak]

Attempting to vertically align a <table> within a <td> in Outlook 2013/2016/2019/365 will fail if the <table> is also being aligned with the align attribute.

Example Code:

<table cellpadding="0" cellspacing="0" border="1" width="50%">
    <tr>
        <td valign="middle" style="height:200px">
            <table cellspacing="0" cellpadding="0" border="0" align="right" style="background-color: #2774ae">
                           <tr>
                             <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">
                               <a href="https://www.example.com" style="color: #ffffff">Button</a>
                       </td>
                    </tr>
            </table>
        </td>
    </tr>
</table>

Screenshot: Bugged table at the top. The second table is how it should look.

Notes:

• This happens whether you are using the valign attribute or the vertical-align CSS inline style on the parent container. And it affects your use of the values middle and bottom. In this case, I only tested with a parent <td>.
• Your choice of horizontal alignment has some bearing, the bug only happens when you choose left or right. The center value doesn't break anything and your vertical alignment behaves as expected.
• In most cases, the Windows Outlook clients that share the Word processing engine share the same bugs. This is one of those instances, however, where the bug only affects certain versions. Outlook 2007 and 2010 do not have this bug.

Solutions:

• Align your table with an align attribute on the parent container instead. This has been tested with a <td> as the parent.

Please chime in if you can think of alternative solutions!

[husseinalhammad]

I haven't tested this, but can we rename the title of the issue to something easier to read like the below?

table[align] ignores parent td[valign=middle] in Outlook 2013/2016/2019/365

Or because this is not specific to the valign attribute, but also the vertical-align CSS property:

table[align] ignores parent td's vertical alignment in Outlook 2013/2016/2019/365

---

On a separate note, is this specific to vertically aligning the table to the middle (with [valign=middle] or vertical-align:middle)? Or does it also ignores the bottom value?

[jkupczak]

Looks like the title has been updated already. And yes, I just tested it and bottom is ignored as well.

[revelt]

To add 2p., very interesting, check out this from w3 — there align is described as:

The align attribute for objects, images, tables, frames, etc., causes the object to float to the left or right margin.

... and "real" float is not supported on Outlooks. It seems there is a connection between align and a real float in Word rendering engine. Also, in the past, I used remove align with CSS on media queries by setting float: none.

[matthieuSolente]

In addition to the information stated above, here are some tests that show what works and what doesn't.

<table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr>
        <td valign="middle" style="height:200px">
          <!--[if !mso]><!-->
          <table cellspacing="0" cellpadding="0" border="0" align="right" style="background-color: #2774ae">
          <!--<![endif]-->
          <!--[if mso]> 
          <table cellspacing="0" cellpadding="0" border="0" align="right" style="background-color: red">
          <![endif]-->
                <tr>
                    <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">

                        <p style="color: #ffffff">td valign:middle > table align:right</p>

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

<table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr>
        <td align="right" style="height:200px">
            <table cellspacing="0" cellpadding="0" border="0"  style="background-color: #2774ae">
                <tr>
                    <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">
                        <p style="color: #ffffff">td align:right </p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr>
        <td style="height:200px">
          <!--[if !mso]><!-->
            <table cellspacing="0" cellpadding="0" border="0" align="right" style="background-color: #2774ae">
               <!--<![endif]-->
          <!--[if mso]> 
          <table cellspacing="0" cellpadding="0" border="0" align="right" style="background-color: red">
          <![endif]-->
                <tr>
                    <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">
                        <p style="color: #ffffff">table align:right</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
<table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr>
        <td valign="middle" align="right" style="height:200px">
            <table cellspacing="0" cellpadding="0" border="0" style="background-color: #2774ae">
                <tr>
                    <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">
                        <p style="color: #ffffff">td valign:middle align:right</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr valign="middle">
        <td align="right" style="height:200px">
            <table cellspacing="0" cellpadding="0" border="0" style="background-color: #2774ae">
                <tr>
                    <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">
                        <p style="color: #ffffff">tr valign:middle > td align:right</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

<table cellpadding="0" cellspacing="0" border="1" width="100%">
    <tr align="right">
        <td valign="middle" style="height:200px">
            <table cellspacing="0" cellpadding="0" border="0" style="background-color: #2774ae">
                <tr>
                    <td height="44" style="color: #ffffff; padding: 0px 30px; font-weight: bold; line-height:20px;">
                        <p style="color: #ffffff">tr align:right > td valign:middle</p>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

what is interesting to note is that if we do td valign> table align it does not work, if we just do td align, it works. And when you do tr align>td valign or tr valign >td align, it works both ways.