1

最初の電子メール テンプレート デザインを作成しようとしたときに、それがコードの原因であると思われる問題を見つけました (私はそれについてとても新しいです)。

これはスクリーンショットです：

ここに画像の説明を入力

「ブログ投稿」セクションと「サイドバー」セクションの幅が、上記の「表セクション」の幅と同じでないのはなぜですか?

私は次のようなコードを使用しました：

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

2 に答える 2

0

2行2列しかない場合、なぜこれほど複雑にするのでしょうか。

<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が多すぎるため、ベストプラクティスはシンプルに保つことです。また、特定の電子メールクライアントで表示の問題が発生する可能性があるため、テーブルの幅を100％ではなく596pxにすることをお勧めします。

于 2012-06-20T09:51:21.793 に答える