響應電子郵件，創建一個HTML表格

我正在爲活動監視器製作響應式eDM，使用Litmus作爲測試工具。響應電子郵件，創建一個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://tedgoas.github.io/Cerberus/ –

嘿哇，謝謝你的鏈接來源！我很久以前就保存了這個文件，但找不到源代碼！ :) – Niqql

要建立由Niklas費特的回答，我把他的代碼並用您的電子郵件寬度進行更新。這是響應式電子郵件設計（針對支持@media查詢的電子郵件客戶端）和混合電子郵件設計（針對不支持媒體查詢的電子郵件客戶端）的組合。這有點複雜，但你可以使用下面的代碼片段建立你的電子郵件。

還銘記正確嵌套<table>標籤：不能嵌套一個<tr>直接在<td>內。

@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表格

回答

相關問題