このヘッダーをHTMLメールで処理できません

MailChimpでテンプレートを作成しようとしていますが、正しくスタイルできません。 CSSのスタイルはインラインでなければならず、<table>というタグで構成されていなければなりません。ここでこのヘッダーをHTMLメールで処理できません

This is what I have so far

This is the end-goal

私のコードは、これまでのところです：

<section id="header" style="background-color: #148e97;"> 
    <table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%"> 
     <tr> 
      <td align="center" valign="top"> 
       <table border="0" cellpadding="20" cellspacing="0" width="600" id="emailHeader"> 
        <tr> 
         <td align="right" valign=""> 
          <div class="socialMediaIcons"> 
          <img src="img/facebook.png"/> 
          <img src="img/twitter.png"/> 
          <img src="img/mail.png"/> 
          <img src="img/linkedin.png"/> 
          </div> 
         </td> 
        </tr> 
       </table> 
       <table id="title" width="500"> 
        <tr> 
        <td align="left" valign=""> 
         <img src="img/logo.png"/> 
        </td> 
        <td style=""> 
         <h1 style="text-align: right; " 
        style="font-family: arial;">Brand USA E-News -- April 2016</h1> 
        </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
    </section>

出典

2016-05-17 Gabriel Rivera

なぜそれがテーブルにありますか？ - あなたのCSSは何ですか？ – Andrew

@AndrewテーブルはHTMLメールを現実的にスタイルする唯一の方法です。それで、インラインスタイルは... CSSスタイルシートはなく、インライン 'style'タグでなければなりません。 – Martin

OPには、コードからHTML5シンタンティクス（' section'）を電子メールHTML最高でHTMLバージョン3またはバージョン4.0に戻ってきたものです。 – Martin

HTMLメールを作成するとき、あなたは、Internet Explorer 6がいた時に、時間に自分自身をバック輸送する必要がありますクール。

<section id="header">またはclass="socialMediaIcons"は、すべての電子メールクライアントが<style>タグをサポートしているわけではないため使用できません。 HTML5要素は最もサポートされていないため、CSSをインライン化してstyle="..."属性で使用する必要があります。メールクライアントにはmixed support for CSSがたくさんあるので、あなたは最低限の共通点を満たす必要があります。

次のコードは、あなたのレイアウトを作成する方法について開始ポイント与える：

<html> 
    <body style="margin: 0; padding:0"> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%" bgcolor="#fff"> 
      <tr> 
       <td valign="center"> 
        <div style="background-color: #148e97; width:660px; margin:auto;"> 
         <table border="0" cellpadding="0" cellspacing="0" height="100%" width="660" bgcolor="#148e97"> 
          <tr> 
           <td width="30"> 
            <img src="http://placehold.it/1x1" width="30" alt="Spacer"> 
           </td> 
           <td width="130"> 
            <img src="http://placehold.it/130x115" alt="Logo"> 
           </td> 
           <td valign="top" width="500"> 
            <table border="0" cellpadding="0" cellspacing="0" height="100%" width="500"> 
             <tr> 
              <td> 
               <img src="http://placehold.it/1x1" width="1" height="20" alt="Spacer"> 
              </td> 
             </tr> 
             <tr> 
              <td align="right"> 
               <div class="socialMediaIcons"> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
                <img src="http://placehold.it/24" alt="Social Icon" width="24" height="24" /> 
               </div> 
              </td> 
             </tr> 
             <tr> 
              <td align="right"> 
               <h1 style="text-align: right; font-family: arial; color: #fff;">Brand USA E-News -- April 2016</h1> 
              </td> 
             </tr> 
            </table> 
           </td> 
           <td width="30"><img src="http://placehold.it/1x1" width="30" alt="Spacer"></td> 
          </tr> 
         </table> 
        </div> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

をあなたが気づくことの一つは、<table>タグの多くは、さらに内部の他の<table>タグであるある<table>タグ。物事は乱雑になる。

私はウェブサイトを構築する際に、もはやこれらの日必要とされている（1x1.gifイメージの代わりにhttp://placehold.it/1x1を使用して）spacer.gifの古い学校の技術を、使用しました。

このコードが正しいパスに設定されていることを願います。私は5年以上HTML電子メールを作成していないので、少し錆びています。

出典

2016-05-17 13:45:16

良い答え。 5年のうちにHTML電子メールを作成していないのですが、その5年間でHTML電子メール*は何も変更されていません。インターネット以外のすべての部分が電子メールを除いて開発されているようです.... – Martin

ありがとう、カーク、これは本当に私が表の開始の笑いを理解するのに役立ちます。 –

@Martin haha、良い点！ –

このヘッダーをHTMLメールで処理できません

答えて

関連する問題