HTML Emails: Center aligning tables affects cell t

Question

I have noticed a 'bug' or whatever with Internet Explorer when viewing HTML emails. I'm using Version 11 and its still present.

If I want to align a table in the center of the page, it is also causing the text in any <td> cells to be centered, even if I set the attribute to align="left" and use inline CSS to specify text-align="left".

Here is some example code (try sending this as a HTML email to your yahoo or gmail account and view it in IE):

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="background:#CCC;">
  <tr>
    <td>
    <table width="650px" border="0" align="center" cellpadding="0" cellspacing="0" style="padding-left:11px;padding-right:11px;background:#FFF;">
  <tr>
    <td align="left" valign="top" style="text-align:left;">Moreover, while in most other animals that I can now think of, the eyes are so planted as imperceptibly to blend their visual power, so as to produce one picture and not two to the brain; the peculiar position of the whale's eyes, effectually divided as they are by many cubic feet of solid head, which towers between them like a great mountain separating two lakes in valleys; this, of course, must wholly separate the impressions which each independent organ imparts.<br><br> The whale, therefore, must see one distinct picture on this side, and another distinct picture on that side; while all between must be profound darkness and nothingness to him. Man may, in effect, be said to look out on the world from a sentry-box with two joined sashes for his window. But with the whale, these two sashes are separately inserted, making two distinct windows, but sadly impairing the view. This peculiarity of the whale's eyes is a thing always to be borne in mind in the fishery; and to be remembered by the reader in some subsequent scenes.</td>
  </tr>
</table>
    </td>
  </tr>
</table>

You should see that the text will be center aligned rather than left aligned. This 'bug' is only present when viewing the code as an HTML email. If you view it as a webpage then it works fine!

I have tested it using web versions of Outlook and Yahoo as well as a different online mail account and the problem is the same only in IE. I tried it in Chrome, Firefox, and Android's built-in browser and it works fine.

I don't understand how to fix it other than not to have my tables centered in the middle of the page. It doesn't look aesthetically pleasing to have my email contents to the left of the page either.

Answer 1

Instead of using align="center" in your parent table tag, try putting it in the parent <td>. Also lose the align="center" on your child table tag, and you don't need CSS text-align:

<table bgcolor="#CCCCCC" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">
      <table bgcolor="#FFFFFF" width="650px" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td align="left" valign="top" style="padding-left:11px; padding-right:11px;">
            Your text here...
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>