반응 형 전자 메일, HTML 표 생성

Litmus를 테스트 도구로 사용하여 캠페인 모니터에 반응 형 eDM을 작성하는 중입니다.반응 형 전자 메일, HTML 표 생성

나는 아래 그림과 같은 표를 얻는데 약간의 문제가있었습니다.

나의 현재 코드는 다음과 같습니다. 전체 문서 크기가 600px이므로이 표의 중심은 540px이어야합니다.

<table border="0" cellspacing="0" cellpadding="0" class="content" align="center"> 
<tr> 
    <td colspan="3"> 
    <table width="100%" bgcolor="#ffffff"> 
     <tr> 
     <td class="gutter">&nbsp;</td> 
     <td class="spacer-medium">&nbsp;</td> 
     <td class="gutter">&nbsp;</td> 
     </tr> 
     <tr> 
     <td class="gutter">&nbsp;</td> 


      <tr width="540" height="148" style="background-image: url('rectangle.png'); background-size:100% 100%; background-repeat: no-repeat; width: 540px; padding-top:20px; padding-left:20px; padding-right:10px;color: #ffffff; font-family: Arial, Helvetica; font-size: 14px; line-height: 20px;" class="__not-plain-text gradient__image centre" background="rectangle.png" bgcolor="#f36d00"> 

      <td width="400" align="left" style="float:left; width:400px; font-weight:bold;">TEXT GOES HERE AS BOLD</td> 
      <td width="400" align="left" style="float:left; width:400px;">LONGER PARAGRAPH TO GO HERE AS NORMAL</td> 
      <td><img src="images/man2.png" align="right" alt="offer" width="109" style="width: 109px; float:right padding-right:10px" class="__not-plain-text"></td> 
      </tr> 
     </tr> 
    </table> 
    </td> 
</tr>

어떤 도움을 크게 감상 할 수있다! 고맙습니다.

출처

2016-07-17 joshzee

내가 이메일에 대한 Zurb의 재단을 확인하도록 권하고 싶습니다 : 그것은 당신의 문제에 대한 해결책이 아니다 (http://foundation.zurb.com/emails/docs/을하지만, '당신 같은 그냥 "시작", 그것은 더 나은 방법은 이메일 템플릿을 만들 수 있습니다) – moped

이 문제에 대한 해결책은 좀 더 복잡합니다. 메일을 확인하기 위해 많은 양의 코드가 필요합니다. 메일은 대부분의 메일 클라이언트에서 올바르게 표시됩니다. 이 코드에서 작업을 시도, 나는 그것 정말 오랫동안 때문에, JSfiddle에서 설정 :

https://jsfiddle.net/ojyr085t/

또는 여기에 코드로는 :

<style> 
@media screen and (max-width: 480px) { 

      /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */ 
      .fluid, 
      .fluid-centered { 
       width: 100% !important; 
       max-width: 100% !important; 
       height: auto !important; 
       margin-left: auto !important; 
       margin-right: auto !important; 
      } 
      /* And center justify these ones. */ 
      .fluid-centered { 
       margin-left: auto !important; 
       margin-right: auto !important; 
      } 

      /* What it does: Forces table cells into full-width rows. */ 
      .stack-column, 
      .stack-column-center { 
       display: block !important; 
       width: 100% !important; 
       max-width: 100% !important; 
       direction: ltr !important; 
      } 
      /* And center justify these ones. */ 
      .stack-column-center { 
       text-align: center !important; 
      } 

      /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */ 
      .center-on-narrow { 
       text-align: center !important; 
       display: block !important; 
       margin-left: auto !important; 
       margin-right: auto !important; 
       float: none !important; 
      } 
      table.center-on-narrow { 
       display: inline-block !important; 
      } 
</style> 
<html><body> 
<table cellspacing="0" cellpadding="0" border="0" align="center" bgcolor="#ffffff" width="100%" style="max-width: 680px;"> 
<tr> 
        <!-- dir=rtl is where the magic happens. This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. --> 
        <td dir="rtl" bgcolor="#ffffff" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;"> 
         <!--[if mso]> 
         <table border="0" cellspacing="0" cellpadding="0" align="center" width="660"> 
         <tr> 
         <td align="center" valign="top" width="660"> 
         <![endif]--> 
         <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:660px;"> 
          <tr> 
           <td align="center" valign="top" style="font-size:0; padding: 10px 0;"> 
            <!--[if mso]> 
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="660"> 
            <tr> 
            <td align="left" valign="top" width="220"> 
            <![endif]--> 
            <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column"> 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
              <tr> 
               <td dir="ltr" style="padding: 0 10px 10px 10px;"> 
                <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow"> 
               </td> 
              </tr> 
             </table> 
            </div> 
            <!--[if mso]> 
            </td> 
            <td align="left" valign="top" width="440"> 
            <![endif]--> 
            <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column"> 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
              <tr> 
               <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow"> 
                <strong style="color:#111111;">Class aptent taciti sociosqu</strong> 
                <br><br> 
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
               </td> 
              </tr> 
             </table> 
            </div> 
            <!--[if mso]> 
            </td> 
            </tr> 
            </table> 
            <![endif]--> 
           </td> 
          </tr> 
         </table> 
         <!--[if mso]> 
         </td> 
         </tr> 
         </table> 
         <![endif]--> 
        </td> 
       </tr> 
       </table> 
</body></html>

출처

2016-07-18 08:41:19 Niqql

이게 익숙한, 나는 코드가 작동 내기 :) http://thegoas.github.io/Cerberus/ –

와우, 연결 주셔서 감사합니다 근원! 나는 이것을 오래 전에 저장했지만 소스를 찾을 수 없었다! :) – Niqql

은 니클라스 펫의 대답에 빌드하려면, 내가했다을 자신의 코드를 수정하고 이메일 너비로 업데이트하십시오. 응답 성있는 전자 메일 디자인 (@media 쿼리를 지원하는 전자 메일 클라이언트의 경우)과 혼합 전자 메일 디자인 (미디어 쿼리를 지원하지 않는 전자 메일 클라이언트의 경우)의 조합입니다. 조금 복잡 하긴하지만 아래 스 니펫을 사용하여 전자 메일을 작성할 수 있습니다.

또한 올바르게 중첩 된 <table> 태그를 염두에 두십시오. 안에 직접 <tr>을 중첩시킬 수 없습니다.

@media screen and (max-width: 600px) { 
 

 
      /* What it does: Forces elements to resize to the full width of their container. Useful for resizing images beyond their max-width. */ 
 
      .fluid, 
 
      .fluid-centered { 
 
       width: 100% !important; 
 
       max-width: 100% !important; 
 
       height: auto !important; 
 
       margin-left: auto !important; 
 
       margin-right: auto !important; 
 
      } 
 
      /* And center justify these ones. */ 
 
      .fluid-centered { 
 
       margin-left: auto !important; 
 
       margin-right: auto !important; 
 
      } 
 

 
      /* What it does: Forces table cells into full-width rows. */ 
 
      .stack-column, 
 
      .stack-column-center { 
 
       display: block !important; 
 
       width: 100% !important; 
 
       max-width: 100% !important; 
 
       direction: ltr !important; 
 
      } 
 
      /* And center justify these ones. */ 
 
      .stack-column-center { 
 
       text-align: center !important; 
 
      } 
 
     
 
      /* What it does: Generic utility class for centering. Useful for images, buttons, and nested tables. */ 
 
      .center-on-narrow { 
 
       text-align: center !important; 
 
       display: block !important; 
 
       margin-left: auto !important; 
 
       margin-right: auto !important; 
 
       float: none !important; 
 
      } 
 
      table.center-on-narrow { 
 
       display: inline-block !important; 
 
      }

<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;" background="rectangle.png"> 
 
<tr> 
 
\t     <!-- dir=rtl : This can be changed to dir=ltr to swap the alignment on wide while maintaining stack order on narrow. --> 
 
        <td dir="rtl" align="center" height="100%" valign="top" width="100%" style="padding: 10px 0;"> 
 
         <!--[if mso]> 
 
         <table border="0" cellspacing="0" cellpadding="0" align="center" width="600"> 
 
         <tr> 
 
         <td align="center" valign="top" width="600"> 
 
         <![endif]--> 
 
         <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="max-width:600px;"> 
 
          <tr> 
 
           <td align="center" valign="top" style="font-size:0; padding: 10px 0;"> 
 
            <!--[if mso]> 
 
            <table border="0" cellspacing="0" cellpadding="0" align="center" width="600"> 
 
            <tr> 
 
            <td align="left" valign="top" width="220"> 
 
            <![endif]--> 
 
            <div style="display:inline-block; margin: 0 -2px; max-width: 200px; min-width:160px; vertical-align:top; width:100%;" class="stack-column"> 
 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
              <tr> 
 
               <td dir="ltr" style="padding: 0 10px 10px 10px;"> 
 
                <img src="http://placehold.it/200" width="200" alt="" style="border: 0;width: 100%;max-width: 200px;" class="center-on-narrow"> 
 
               </td> 
 
              </tr> 
 
             </table> 
 
            </div> 
 
            <!--[if mso]> 
 
            </td> 
 
            <td align="left" valign="top" width="440"> 
 
            <![endif]--> 
 
            <div style="display:inline-block; margin: 0 -2px; max-width:66.66%; min-width:320px; vertical-align:top;" class="stack-column"> 
 
             <table cellspacing="0" cellpadding="0" border="0" width="100%"> 
 
              <tr> 
 
               <td dir="ltr" style="font-family: sans-serif; font-size: 15px; mso-height-rule: exactly; line-height: 20px; color: #555555; padding: 10px 10px 0; text-align: left;" class="center-on-narrow"> 
 
                <strong style="color:#111111;">Class aptent taciti sociosqu</strong> 
 
                <br><br> 
 
                Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 
 
               </td> 
 
              </tr> 
 
             </table> 
 
            </div> 
 
            <!--[if mso]> 
 
            </td> 
 
            </tr> 
 
            </table> 
 
            <![endif]--> 
 
           </td> 
 
          </tr> 
 
         </table> 
 
         <!--[if mso]> 
 
         </td> 
 
         </tr> 
 
         </table> 
 
         <![endif]--> 
 
        </td> 
 
       </tr> 
 
       </table>

출처

2016-07-19 02:02:28

반응 형 전자 메일, HTML 표 생성

답변

관련 문제