Question

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

这是截图：

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

我使用的代码如下：

<!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>

Answer 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>

在每个内容广告位中放置您想要的任何内容＆＃34;并完成工作。你有太多的td＆t和tr，最好的做法是保持简单。我还建议给表格宽度为596px而不是100％，因为这会导致某些电子邮件客户端出现显示问题。

Answer 2

我发现你的代码中有一些错误。

1。）在底部的第二个表中，您有</tr>而不是<tr>

2。）顶部表格是对齐中心，但是底部没有对齐声明

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

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

请参阅下面的代码段：

＆＃13;

<!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>

＆＃13;

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

2 个答案: