0

私は HTML メールを書いているので、表ベースのレイアウトの全盛期を再現しています。残念ながら、本文をページの中央に配置することはできません (もちろんブラウザでは機能しますが、HTML メール経由で Gmail でテストする場合は機能しません。最初にネストされたテーブルを<td>、外側のテーブル 内側のテーブルは固定幅に設定されているので、うまくいくと思っていました。

完全なコードは次のとおりです ( 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>

4

4 に答える 4

4

個人的には、本文全体 (レスポンシブ メールのモバイル バージョンでも) を 100% 幅のテーブルにラップするのが好きです (gmail はそれを取り除くかもしれませんが、とにかく 100% と想定します)。トリックは td のアライン センターです。元-

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

また、ラッパー テーブルにを割り当てることもできbgcolorます。これにより、通常は背景色が取り除かれる Web メール クライアントでも、メールの背景色が得られます。body

于 2013-09-09T16:21:26.720 に答える
3

Litmusをチェックしたとき、コードは正常に機能します。私の唯一の懸念は、Gmail / IEでコピーを左揃えにするために、以下に「text-align：left」を追加する必要があるかもしれないということです。

<p style="font-family: Georgia, serif; text-align: left;">Body</p>
于 2013-02-28T20:35:44.290 に答える
0

body の p 要素に text-align css スタイルを追加しようとしましたか?

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

セル内のpを中央に配置していますが、その内容は中央に配置していません。または、p タグを削除します。

于 2013-02-28T20:15:11.673 に答える
0

ご提案いただきありがとうございます。さらに調査した結果、Gmail が実際にwidth="100%"外部テーブルから属性を削除していることがわかりました。現時点では、コンテンツを Gmail ウィンドウの中央に配置する方法はないと思います。

于 2013-02-28T20:27:42.320 に答える