1. 首頁
  2. 問答
  3. html電子郵件簽名填充/對齊問題

html電子郵件簽名填充/對齊問題

2017-02-15 60 views
0

試圖讓電子郵件簽名工作，但無法讓圖像部分坐在表格列上齊平，似乎是在底部和右側的空白/填充。下面是即時通訊使用的代碼，看起來在瀏覽器不錯，但不是電子郵件（前景）html電子郵件簽名填充/對齊問題

<!doctype html> 
 
\t \t \t \t <html> 
 
\t \t \t \t <head> 
 
\t \t \t \t <meta charset="utf-8"> 
 
\t \t \t \t <title>J.Clarke</title> 
 
\t \t \t \t <style> 
 
\t \t \t \t .btmStrip{ 
 
\t \t \t \t \t /*border:1px solid red; 
 
\t \t \t \t \t padding-bottom:50px; 
 
\t \t \t \t background: linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -o-linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -moz-linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -webkit-linear-gradient(bottom, #000 70%, #fff 70%); 
 
\t \t \t \t background: -ms-linear-gradient(bottom, #000 70%, #fff 70%); */ 
 
\t \t \t \t } 
 
\t \t \t \t </style> 
 
\t \t \t \t </head> 
 

 
\t \t \t \t <body> 
 

 
\t \t \t \t <table width="700" border="0" cellspacing="0" cellpadding="0" style="border-spacing:0;"> 
 
\t \t \t \t <tbody> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td width="118">&nbsp;</td> 
 
\t \t \t \t \t <td width="62">&nbsp;</td> 
 
\t \t \t \t \t <td colspan="3" rowspan="2" style="text-align:right;padding-right:5%;"><a href="http://name.co.za/" target="_blank"><img src="logo1.jpg" width="131" height="90" alt="co name"/></a></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td>&nbsp;</td> 
 
\t \t \t \t \t <td colspan="3"><span style="vertical-align:text-top; font-size:14px;font-family:'Montserrat Ultra Light';">Warm Regards,</span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t <td></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td colspan="4"></td> 
 
\t \t \t \t \t </tr> 
 

 
\t \t \t \t \t <tr> 
 
\t \t \t \t \t <td width="118" style="height:0px; background-color: #fff;line-height:0px"></td> 
 
\t \t \t \t \t <td width="62" style="height:0px; background-color: #fff;line-height:0px"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" rowspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="4" style="text-align:center;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" rowspan="17" align="right" valign="bottom"><img style="display:block" src="http://overit.co.za/tst.jpg" width="180" height="175" alt=""/></td> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;"> 
 
\t \t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;">&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"> 
 
\t \t \t \t \t 
 
\t \t \t \t \t </td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:center;padding:0px 5px;"><hr style="border-bottom: 1px solid #000; background-color:#000;margin-left: 0px;"/></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#fff;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:center;padding-bottom:2px;"><span style="font-family:'Montserrat Ultra Light'; vertical-align:text-top; font-size:16px;"><span style="font-family:'Montserrat SemiBold';">Name Name</span> | <a style="text-decoration:none;color:#282828;" href="mailto:[email protected]" target="_blank">[email protected]</a> | <a style="text-decoration:none;color:#282828;" href="http://name.co.za/" target="_blank">www.name.co.za</a> </span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;" height="11px"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:center;"><span style="font-family:'Montserrat Ultra Light'; color:#fff;font-size:10px;"><span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:[email protected]" target="_blank">[email protected]</a> | <span style="font-family:'Montserrat SemiBold';">name</span> | 031 031031031 | <a style="text-decoration:none;color:#fff;" href="mailto:[email protected]" target="_blank">[email protected]</a></span></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:left;"></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;" height="25px">&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t <!-- <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;" height="28.75px">&nbsp;</td> 
 
\t \t \t \t \t </tr>--> 
 
\t \t \t \t <!-- <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td colspan="2" style="text-align:right;" height="28.75px">&nbsp;</td> 
 
\t \t \t \t \t </tr>--> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td width="415" height="18.75px" style="text-align:right;">&nbsp;</td> 
 
\t \t \t \t \t <td width="105" style="text-align:right;" height="18.75px">&nbsp;</td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t \t <tr style="background-color:#000;"> 
 
\t \t \t \t \t <td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;"><a style="text-decoration:none;color:#d7ab64;" href="http://satincandy.co.za/" target="_blank">SHOP NOW</a></span> | <a style="text-decoration:none;color:#fff;font-size:80%;" href="http://satincandy.co.za/" target="_blank">SIGN UP TO OUR NEWSLETTER</a></span></td> 
 
\t \t \t \t \t <td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"><img data-class="external" src="instagram.png" align="right"></a> 
 
\t \t \t \t \t \t <a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="pintrest.png" align="right"></a> 
 
\t \t \t \t \t \t <a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="facebook.png" align="right"></a> 
 
\t \t \t \t \t <a target="_blank" href="https://www.facebook.com/"><img data-class="external" src="twitter.png" align="right"></a></td> 
 
\t \t \t \t \t </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t \t </table> 
 

 
\t \t \t \t </body> 
 
\t \t \t \t </html>

來源

2017-02-15 RustyDP

+0

你能否提供一個在Outlook中看起來像什麼的屏幕截圖。 – Zze

+0

@Zze謝謝，這是一個截圖：https：//postimg.org/image/3llyqt7jl/這是它應該看起來如何：https://postimg.org/image/vezxjrq47/ – RustyDP

回答

0

其列和行間距，導致該問題。試試這個代碼：

<table width="700" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
     <tr> 
     <td style="padding-left:180px;padding-bottom:20px;">Warm regards</td> 
     </tr> 
     <tr> 
     <td style="padding-left:180px;"> 
    <table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tbody> 
    <tr> 
     <td bgcolor="#000000" height="2"></td> 
    </tr> 
    </tbody> 
</table> 

    </td> 
     </tr> 
     <tr> 
     <td style="padding-left:180px;padding-top:20px;padding-bottom:20px;"><span style="font-family:'Montserrat SemiBold';">loren loren loren loren loren</span></td> 
     </tr> 
     <tr> 
     <td bgcolor="#000000"><table width="100%" border="0" cellspacing="0" cellpadding="0"> 
      <tr> 
      <td width="180" align="left" valign="top"><img src="http://placehold.it/180x150/000000/ffffff/?text=Logo+Goes+Here" width="180" height="150" /></td> 
      <td bgcolor="#FFFFFF" style="padding-top:50px;"><table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000"> 
       <tbody> 
       <tr> 
        <td style="text-align:right; padding-bottom:10px;" height="30px">&nbsp;</td> 
        <td style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px">&nbsp;</td> 
       </tr> 
       <tr> 
        <td style="text-align:right; padding-bottom:10px;" height="30px"><span style="color:#fff; font-family:'Montserrat Ultra Light';"><span style="color:#d7ab64; font-family:'Montserrat Regular'; font-size:80%;">loren loren loren loren loren</span></td> 
        <td width="105" style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px"><a target="_blank" href="https://www.facebook.com"> <img data-class="external" src="instagram.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="pintrest.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="facebook.png" align="right" /> </a> <a target="_blank" href="#"> <img data-class="external" src="twitter.png" align="right" /> </a></td> 
       </tr> 
       <tr> 
        <td style="text-align:right; padding-bottom:10px;" height="30px">&nbsp;</td> 
        <td style="text-align:left;padding-right:15px;padding-bottom:10px;" height="30px">&nbsp;</td> 
       </tr> 
       </tbody> 
      </table></td> 
      </tr> 
     </table></td> 
     </tr> 
    </tbody> 
</table>

我重新編寫並刪除了行跨度和列間距。你可以添加和刪除代碼中的任何東西。

來源

2017-02-16 02:13:19 Syfer

+0

我沒有看到你利用圖像在你的代碼？謝謝 – RustyDP

+0

你的意思是左邊的黑色大圖嗎？我可以在沒有它的情況下刪除它。左側的間距由填充和背景色來處理。 – Syfer

+0

圖像只是一個佔位符圖像，因爲我不能顯示真實圖像。需要存在圖像，問題在於圖像和列之間的填充/間隔 – RustyDP

相關問題

 相關問題