【发布时间】:2022-01-02 20:39:06
【问题描述】:
这里是初级 Web 开发人员,我被要求做的第一个 HTML 电子邮件签名,感谢您的耐心等待。
出现显示问题 - 在电子邮件客户端 (Outlook 365) 中查看时,表格中的第一行不对齐,我真的不知道为什么。当我在这里运行代码时,它会正确显示。
图片和代码如下。
请帮忙!!!
提前致谢, 利比
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body{margin:0;padding:0;width:100% !important;}
img {outline:none;text-decoration:none;border:none;}
p {margin:0px !important;}
a {color:inherit !important;text-decoration:none !important;}
@media only screen and (max-width: 1000px) {
.hidden-mobile {
display: none;
}
}
</style>
<table width="640" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="10">
<tbody>
<tr>
<td bgcolor="#000000"><table width="90%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td><span style="font-family:'Lato', Arial, sans-serif; font-size:16px; line-height:16px; font-weight:700; color:#fff; text-transform:uppercase;">Libby Stonehawk</span></td>
</tr>
<tr>
<td valign="top" style="padding-top:5px;"><span style="font-family:'Lato', Arial, sans-serif; font-size:14px; line-height:16px; font-weight:400; color:#d6e3e1; text-transform:uppercase;">Website Manager</span></td>
</tr>
</tbody>
</table></td>
<td bgcolor="#000000"><table width="10%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="112" align="right"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/kallumslogotrans-white-2.png" width="auto" height="auto" alt=""/></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="60%" bgcolor="#EFEFEF" style="padding:10px 0;"><table width="90%" border="0" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="24"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/icon-map_dark.png" width="16" height="16" alt=""/></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><p stlye="margin:0 !important">100 Lower Richmond Road, London, SW15 1LN</p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="24"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/icon-phone_dark.png" width="16" height="16" alt=""/></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#524e4e;"><a href="tel:" style="color:#524e4e !important; text-decoration:none !important;"><span style="color:#647875; text-decoration:none;">07941073079</span></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="24"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/icon-email_dark.png" width="16" height="16" alt=""/></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><a href="mailto:" style="color:#647875 !important; text-decoration:none !important;"><span style="color:#647875; text-decoration:none;">libby@kallumsbathrooms.co.uk</span></a></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="24"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/icon-web_dark.png" width="16" height="16" alt=""/></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><a href="https://kallumsbathrooms.co.uk/" style="color:#647875 !important; text-decoration:none !important;"><span style="color:#647875; text-decoration:none;">kallumsbathrooms.co.uk</span></a></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
<td width="40%" style="padding:10px 0;"><table width="60%" border="0" align="center" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="24"><a href="#" target="_blank"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/social-facebook_dark.png" width="16" height="16" alt=""/></a></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><p stlye="margin:0 !important">/kallumsbathrooms</p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="24"><a href="#" target="_blank"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/social-twitter_dark.png" width="16" height="16" alt=""/></a></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><p stlye="margin:0 !important">@KallumsBathroom</p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="24"><a href="https://www.instagram.com/kallumsbathrooms/?hl=en" target="_blank"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/social-instagram_dark.png" width="16" height="16" alt=""/></a></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><p stlye="margin:0 !important">@kallumsbathrooms</p></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="24" style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:700; color:#384241;"><a href="#" target="_blank"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/social-pinterest_dark.png" width="16" height="16" alt=""/></a></td>
<td style="font-family:'Lato', Arial, sans-serif; font-size:13px; line-height:14px; font-weight:400; color:#647875;"><p stlye="margin:0 !important">/kallumsbathroom</p></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<table width="640" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<td width="640px" valign="center"><img src="https://kallumsbathrooms.co.uk/wp-content/uploads/2021/11/Slider-Test-3-1024x597-8.jpg" width="640px" height="auto" alt=""/></td>
</tr>
</tbody>
</table>
【问题讨论】:
-
您使用什么电子邮件客户端?我用Papercut 软件测试过,它工作正常。 (postimg.cc/2159WWQ1)
-
多么好奇!谢谢你帮我检查。我正在使用 Microsoft Outlook 365
-
这是在Gmail 上发生的事情,这是在outlook.com 上发生的事情。该表可能像this 一样简单。但是,我发现 HTML 可以在每个电子邮件客户端上呈现不同。设计应该非常基础和简单,因为 CSS 在这些电子邮件客户端上非常有限。
标签: html html-email text-alignment email-client