为了让我的电子邮件看起来更“专业”，我想创建一个外观整洁的签名。现在进行测试，我首先要创建一个简单的签名。如果我掌握了窍门，就把它扩展成更好的。
看来我似乎无法“重置”或清除表格。但我无法弄清楚问题是什么......任何帮助将不胜感激!
对于初学者，我想创建一个签名 like this :
我创建了一个包含简单代码的 html 文件(包括 css)。见下文。我一直遇到的问题是，由于某种原因，当我在其中一个单元格中插入图像时，表格高度似乎更大(仅在底部)。 See problem .
你可以清楚地看到， table 的高度超过了图片的高度。我不知道如何解决这个问题......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>EmailSignature</title>
<style>
table, td, tr {
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
padding: 0;
margin: 0;
}
table {
width: 400px;
}
img {
padding: 0;
margin: 0;
}
#Avatar {
width: 80px;
height: 80px;
}
#Whitespace {
width: 2px;
}
#BlueBar {
width: 6px;
background-color: #0CF;
margin: 20px;
}
</style>
</head>
<body>
<table>
<tr>
<td rowspan="3" id="Avatar"><img id="Avatar" src="enhanced-buzz-16839-1297795475-9.jpg"></td>
<td rowspan="3" id="Whitespace"> </td>
<td rowspan="3" id="BlueBar"> </td>
<td rowspan="3" id="Whitespace"> </td>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
<tr>
<td>Tekst</td>
</tr>
</table>
</body>
</html>
最佳答案
就解决您的问题而言，您可能需要重新查看表的结构。开发 HTML 电子邮件和签名可能非常困难，因为许多电子邮件客户端响应不同并且具有不同的支持级别。
为电子邮件客户端使用编写 HTML、CSS 和 JS 的指南已由 Campaign Monitor 创建，可在此处找到:https://goo.gl/oo1tcU
支持多种多样，“安全”元素和属性非常少，遗憾的是，campaign monitor 的指南也没有包含有问题的 HTML 属性列表。例如，我个人曾经历过 rowspan 和 colspan 在很多电子邮件客户端中无法正常工作，因此我根本不建议使用它们。取而代之的是绘制一个具有相同结构的网格，并使用具有定义的 HTML 宽度和高度属性的空标签来使表格适合您。
不幸的是，要使签名在所有客户端中看起来完全相同，需要使用空但已定义的标签等步骤，或者某些客户端会简单地添加正在运行的 colspans。
在 HTML 电子邮件/签名中，您必须定义所有内容以确保没有任何变化，我在所有元素开始时使用的表格标签看起来像这样:
<table width="[your desired width]" align="center" cellpadding="0" cellspacing="0" border="0" frame="0" bgcolor="#fff"
style="border-spacing: 0; padding: 0; border: 0; font-family: Arial, Helvetica, sans-serif;
background-color: #fff; border-collapse: collapse; color: #000; font-size: 16px; line-height: 19px;" >同样对于所有图像使用如下标签并在 HTML NOT CSS 中定义宽度和高度。
<img src="" alt="" width="" height="" style="display: block; border: none;"/>电子邮件客户端让您像 1990 年代那样编写 HTML，这非常令人沮丧，但如果不考虑这些因素，您可能会在一个客户端中获得想要的结果，但如果您发送给另一个客户端，您的签名在收件人看来会有所不同。当你试图提高你的专业水平时，我认为这是不希望的!
我建议的另一个技巧是尽可能多地使用图像(并记住在 HTML 中定义宽度和高度)，因为如果定义正确，使用定义的每个 td 和 img 标签宽度和高度构建的结构几乎永远不会改变。这是有益的，因为文本字体的支持也很低，除非它们是标准字体，例如宋体!
最后只使用内联样式，许多客户会去掉 head 标签中的任何内容!
关于html - table 高度超过图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32340375/