在HTML電子郵件中的表格內放置文本

Question

我正在制作已經設計好的個性化HTML電子郵件。 我已經將所有內容放置在表格中對電子郵件進行了編碼。 我需要以一種分散的方式將文本放在三個不同的區域中。 我嘗試將文本放入表格行中的div並使用內聯CSS設置樣式，但是，當我在emailonacid（電子郵件測試網站）上對其進行測試時，它無法在不同的電子郵件程序上正確顯示。 有沒有一種方法可以使它適用於所有電子郵件程序？

我想這樣放置文本： http : //i754.photobucket.com/albums/xx182/rache_R/image_zps0604dece.jpg黑框是圖像所在的位置。

<tr>
    <td>
                    <div id="cambelts" style="margin-top: -30px;text-transform: uppercase; position: relative; top: 80px; left: 170px;">This is text 1
                    <br/>
                    <span style="font-weight: bold;">&#163;#XX.XX#</span></div>
        <img src="images/Untitled-1_04.jpg" width="800" height="418" alt="">

                     <div id="Accessory_Belt_kits" style="text-transform: uppercase; position: relative; top: -235px; left: 20px;">This is text 2
                    <br/>
                    <span style="font-weight: bold;">&#163;#XX.XX#</span></div>

                    <div id="Water_Pumps" style="text-transform: uppercase; float: right; position: relative; top: -80px; right: 40px;">This is text 3
                    <br/>
                    <span style="font-weight: bold;">&#163;#XX.XX#</span></div>   
                    </td>
</tr>

Answer 1

您不應該在電子郵件中花哨的CSS技巧。 電子郵件應該更多地涉及內容，而不是CSS定位和gi頭。

話雖如此，電子郵件客戶端確實支持某些CSS屬性。 單擊此處檢查不同的電子郵件客戶端支持哪些屬性。 另外，這里還有一個工具 ，可讓您查看如何在不同的電子郵件客戶端中呈現電子郵件。

因此，我的建議是不要試圖破解顯示內容的方式，而應將重點更多地放在最終用戶將看到的內容上，而不是最終用戶看到的內容上。

Answer 2

除了使用CSS，您還可以在該行中添加另一個表以調整文本位置。 這樣，您可以輕松管理文本位置。

將表格的邊框設置為零（<table border =“ 0”>），以便在必要時使其不可見。

Answer 3

我剛開始創建HTML電子郵件，但是我發現並非所有CSS代碼都可以在所有電子郵件客戶端上正常工作，因此最好堅持使用盡可能多的HTML。

可以完成此操作的一種方法是，將表格分為兩列。 在左列中，您會看到文本1和3，在右列中，您會看到文本2。為了創建間距，您將需要包含提供間距的空“單元格”。

<table width="600" cellpadding="0" cellspacing="0" align="center">
 <tr>
  <td width="290">
   <table align="center">
    <tr>
     <td>
      <h1>Text 1</h1>
     </td>
    </tr>
    <tr>
     <td height="20">
      &nbsp;
     </td>
    </tr>
    <tr>
     <td>
      <h1>Text 2</h1>
     </td>
    </tr>
  </table>
 </td>
 <td width="20">
  &nbsp;
 </td>
 <td width="290">
  <table align="center">
    <tr>
      <td height="20">
       &nbsp;
      </td>
     </tr>
     <tr>
      <td height="20">
       <h1>Text 2</h1>
      </td>
     </tr>
     <tr>
      <td height="20">
       &nbsp;
      </td>
     </tr>
    </table>
   </td>
  </tr>
 </table>

這將為您提供扎實的基礎，並且所有電子郵件客戶端都將正確呈現表格。