title: Centering the body of an HTML email in Gmail
body: <p>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 <a href="http://ctrlq.org/html-mail/" rel="nofollow">HTML Mails</a>. I would like the table which is nested in the first <code>&lt;td&gt;</code> 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?</p>
  
  <p>Here's the full code (<a href="http://jsfiddle.net/W4AKA/3" rel="nofollow">fiddle</a>):</p>
  
  <pre><code>&lt;table width="100%"&gt;
  &lt;tr&gt;
      &lt;td width="100%" align="center"&gt;
          &lt;table width="600" height="100%"&gt;
              &lt;tr&gt;
                  &lt;td width="100%"&gt;
                      &lt;table cellpadding="0" cellspacing="0"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;table cellpadding="0" cellspacing="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;"&gt;
                                              &lt;table cellpadding="0" cellspacing="0"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"&gt;&lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;table cellpadding="0" cellspacing="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="100" height="100"&gt;
                                              &lt;img src="" width="100" height="100"&gt;
                                              &lt;/a&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;table cellpadding="0" cellspacing="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td style="border-top: 1px solid #DFC6B2; border-bottom: 1px solid #DFC6B2;"&gt;
                                              &lt;table cellpadding="0" cellspacing="0"&gt;
                                                  &lt;tr&gt;
                                                      &lt;td width="250" height="40" style="border-top: 1px solid #E30023; border-bottom: 1px solid #E30023;"&gt;&lt;/td&gt;
                                                  &lt;/tr&gt;
                                              &lt;/table&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;table cellpadding="20"&gt;
                          &lt;tr&gt;
                              &lt;td width="100%" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:13px;"&gt;
                                   &lt;h1 align="left" style="font-weight:100;margin-top:20px;"&gt;Header&lt;/h1&gt;
  
                                  &lt;p style="font-family: Georgia, serif;"&gt;Body&lt;/p&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                      &lt;table width="100%" cellpadding="0" cellspacing="0"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  &lt;table cellpadding="0" cellspacing="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="275" height="1" style="border-top: 1px solid #DFC6B2;"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;table cellpadding="0" cellspacing="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="50" height="50"&gt;
                                              &lt;img src="" width="50" height="50" /&gt;
                                          &lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                              &lt;td&gt;
                                  &lt;table cellpadding="0" cellspacing="0"&gt;
                                      &lt;tr&gt;
                                          &lt;td width="275" height="1" style="border-top: 1px solid #DFC6B2;"&gt;&lt;/td&gt;
                                      &lt;/tr&gt;
                                  &lt;/table&gt;
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p></p>