Search code examples
htmlcsshtml-tableoutlookhtml-tbody

Table in Outlook does not display text in the center


I use a table for my newsletter in outlook. Everything works until it comes to the text. My text is in outlook not in the center and is just on the left site.

the problem:

<table border="0" cellpadding="0" cellspacing="0" class="footer" width="100%">
                                        <tbody>
                                            <tr>
                                                <td class="two-column" style="padding:0;text-align:left;font-size:0; background-color:rgb(189, 33, 68);"><!--[if (gte mso 9)|(IE)]>
                                                                                                <div class="column" style="width:100%;max-width:640px;display:inline-block;vertical-align:top; text-align: center;">
                                                                                                <table border="0" cellpadding="0" cellspacing="0" style="border-spacing:0;font-family: Arial,Verdana,Helvetica,sans-serif;color:#333333;background-color:rgb(189, 33, 68);" width="100%">
                                                                                                        <tbody>
                                                                                                                <tr>
  <![endif]--></td>
                                                <td class="inner" style="padding-top: 5px; padding-bottom: 5px; padding-right: 20px; padding-left: 20px; font-size:0">
                                                <table border="0" cellpadding="0" cellspacing="0" class="contents" style="border-spacing:0;font-family: Arial,Verdana,Helvetica,sans-serif;color:#333333;width:100%;font-size:11px;text-align:left;text-decoration: none;">
                                                    <tbody>
                                                        <tr>
                                                            <td style="padding: 0px;"><font color="#FFFFFF">Um den Newsletter abzubestellen,</font> <a href="foo" style="font-family: Arial,Verdana,Helvetica,sans-serif; font-size: 11px; color: #333333; text-decoration: underline;"><font color="#FFFFFF">klicken Sie hier.</font></a><br />
                                                            <br />
                                                            <font color="#FFFFFF">F&uuml;r R&uuml;ckfragen wenden Sie sich bitte an <a href="foo" style="text-decoration:underline; color: #ffffff;">foo</a>foo<br />
                                                            E-Mails an den Abssender dieser Nachricht werden nicht bearbeitet.&nbsp;<br />
                                                            <br />
                                                            Ipsum lorem</font></td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>

View in outlook:

enter image description here


Solution

  • I found the bug in my code.

    After the closen table tag in my code is this td:

    </table>
            <!--[if (gte mso 9)|(IE)]>
               </td>
                   <td width="50%" valign="top">
                   <![endif]-->
    

    I changed the width from 50% to 10% and it works now.