Outlook，gmail基本问题（导致代码）答案

【问题标题】：Outlook, gmail basic issue (caused the code)Outlook，gmail基本问题（导致代码）
【发布时间】：2012-06-04 10:39:18
【问题描述】：

我在尝试创建我的第一个电子邮件模板设计时发现了问题，我认为它导致了代码（我对此很陌生）。

这是截图：

想知道为什么“博客文章”和“侧边栏”部分的宽度与上面的“表格部分”不同？

我使用的代码是这样的：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Mail 2</title>
    <style type="text/css">
some style
    </style>
    <meta name="robots" content="noindex,nofollow">
    <meta property="og:title" content="Mail 2">
</head>
<body width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff">
        <!--[if gte mso 9]>
            <v:background fill="t">
               <v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" />
            </v:background>
        <![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
    <tr>
        <td>
            <table align="center" width="600">
                <tr>
                <td>
                This is above table section that shown correct
                </td>
                </tr>
            </table>

            <table width="600">
                <tr>
                <td width="340" colspan="1" class="blog post">
                This is below section that shown not correct as above. Blog post section that looks out of the box.
                </td>

                <td width="200" colspan="1" class="blog post">
                <table>
                    </tr>
                        <td>
                            Blah blah. This is sidebar section that looks out of the box.
                        </td>
                    </tr>
                </table>
                </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

【问题讨论】：

标签： html css html-table html-email

【解决方案1】：

如果你只有两行两列，为什么要这么复杂？

<table width="596px" border="0" cellspacing="2" cellpadding="0">
  <tr>
   <td>Content 1</td>
   <td>Content 2</td>
  </tr>
  <tr>
   <td>Content 3</td>
   <td>Content 4</td>
  </tr>
</table>

在每个“内容点”中放置您想要的任何内容并完成工作。你有太多的 td 和 tr，最好的做法是保持简单。我还建议为表格设置 596 像素而不是 100% 的宽度，因为这可能会导致某些电子邮件客户端出现显示问题。

【讨论】：

【解决方案2】：

我注意到您的代码中有几个错误。

1.) 在底部第二张表中，您使用的是 </tr> 而不是 <tr>

2.) 顶部表格居中对齐，但底部没有对齐声明

3.) 在底部表格中，td 宽度加起来为 540，而不是声明的 600

我相信上述错误是导致问题的原因。如果没有，我需要更多信息来了解每个表中的确切内容，因为它可能是图像大小、嵌套表中的代码中的进一步错误等。

参见下面的代码 sn-p：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Mail 2</title>
    <style type="text/css">
some style
    </style>
    <meta name="robots" content="noindex,nofollow">
    <meta property="og:title" content="Mail 2">
</head>
<body width="100%" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgcolor="#ffffff">
        <!--[if gte mso 9]>
            <v:background fill="t">
               <v:fill type="tile" src="https://lh5.googleusercontent.com/-6styRrYxl3U/T7Sg_Cbww0I/AAAAAAAAAkE/UWVWEJDfSj0/h120/header-bg.png" />
            </v:background>
        <![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff">
    <tr>
        <td>
            <table align="center" width="600">
                <tr>
                <td>
                This is above table section that shown correct
                </td>
                </tr>
            </table>

            <table align="center" width="600">
                <tr>
                <td width="340" class="blog post">
                This is below section that shown not correct as above. Blog post section that looks out of the box.
                </td>

                <td width="200" class="blog post">
                <table>
                <tr>
                        <td>
                            Blah blah. This is sidebar section that looks out of the box.
                        </td>
                    </tr>
                </table>
                </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>
</html>

【讨论】：