Centering the body of an HTML email in Gmail

Question

I'm re-living the glory days of table-based layouts because I'm writing an HTML email. Unfortunately, I can't get the body to center on the page (it works in a browser, of course, but not when testing in Gmail via HTML Mails. I would like the table which is nested in the first <td> to be centered within the outer table. The inner tables are set to a fixed width, so I would have expected that to work. Any ideas?

Here's the full code (fiddle):

<table width="100%">
<tr>
    <td width="100%" align="center">
        <table width="600" height="100%">
            <tr>
                <td width="100%">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
                                            <table cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="100" height="100">
                                            <img src="" width="100" height="100">
                                            </a>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;">
                                            <table cellpadding="0" cellspacing="0">
                                                <tr>
                                                    <td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"></td>
                                                </tr>
                                            </table>
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                    <table cellpadding="20">
                        <tr>
                            <td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;">
                                 <h1 align="left" style="font-weight:100;margin-top:20px;">Header</h1>

                                <p style="font-family: Georgia, serif;">Body</p>
                            </td>
                        </tr>
                    </table>
                    <table width="100%" cellpadding="0" cellspacing="0">
                        <tr>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="50" height="50">
                                            <img src="" width="50" height="50" />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td>
                                <table cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="275" height="1" style="border-top: 1px solid #DFC6B2;"></td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </td>
</tr>

Answer 1

Personally I like wrapping my entire body content (even my mobile version on responsive emails) inside a 100% width table (gmail might strip it but it will assume 100% anyway). The trick is the td's align center. ex-

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;">
    <tr valign="top">
        <td align="center">
            <table with whatever width you want your max width to be>
        </td>
    </tr>
</table>

also you can assign a bgcolor to your wrapper table which will give you a background color for your email even in webmail clients which normally strip background colors in body

Answer 2

Your code works fine when I checked on Litmus. My only concern is you may need to add "text-align: left" to the following to make copy aligned to the left on Gmail/IE.

<p style="font-family: Georgia, serif; text-align: left;">Body</p>

Answer 3

Thanks for your suggestions, but after further investigation, I've discovered that Gmail is actually stripping the width="100%" attribute from the outer table. At this time, I don't think there is any way to center the content within the Gmail window.

Answer 4

Have you tried adding the text-align css style of to the p element of body?

<p style="font-family: Georgia, serif;text-align:center;">Body</p>

you are centering the p within the cell but not its contents. Alternatively remove the p tag.