html 签名中的对齐方式
Alignments in html signature
我真的希望你能提供帮助，因为我正在疯狂地尝试弄清楚如何按照我想要的方式制作这个签名。
基本上，我希望徽标在顶部与文本对齐，
底部图像左对齐，从徽标下方开始（而不是文本下方）。
注意：这个html用于电子邮件，所以我不能使用css。
这是我拥有（和想要）的视觉效果和代码：
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">oxxxxx@txxxxxk.fr </a>| s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">www.txxxxxk.fr </a>
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
<a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
类似这样的方法可能会奏效，只需将底部内容放在自己的行中。
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d; " >
<tr>
<td style="padding: 6px 0 0 0" >
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr"><img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size:12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f;letter-spacing: 1px">TxxxxK</strong><br>
e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration:none; border-bottom:1px dotted #000000;color:#000000">oxxxxx@txxxxxk.fr </a> | s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration:none; border-bottom:1px dotted #000000;color:#000000">www.txxxxxk.fr </a><br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
</td>
</tr>
<tr>
<td colspan="2"><a href="http://twitter.com/Txxxxk"><img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk"><img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk"><img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
<a href="http://www.txxxxk.fr"><img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
</tr>
</table>
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">oxxxxx@txxxxxk.fr </a>| s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">www.txxxxxk.fr </a>
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
<table style="border-bottom: 1px #3d3d3d dotted; margin: 0px 0 6px; min-width: 960px;">
<tr>
<td align="left"><a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
</tr>
</table>
您正在使用一个 table 行来显示需要两行的外观，您还需要在第一个 tr 中使用两个 td 标签以使徽标和文本彼此相邻：
可以这样想：
<行（TR）>
< DATA (TD)> < DATA (TD) >
< / 行（TR）>
<table>
<tr>
<td><!-- logo goes here --></td>
<td><!-- contact info goes here --></td>
</tr>
<tr>
<td><!-- Banner goes here --></td>
</tr>
</table>
我真的希望你能提供帮助，因为我正在疯狂地尝试弄清楚如何按照我想要的方式制作这个签名。
基本上，我希望徽标在顶部与文本对齐， 底部图像左对齐，从徽标下方开始（而不是文本下方）。
注意：这个html用于电子邮件，所以我不能使用css。
这是我拥有（和想要）的视觉效果和代码：
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">oxxxxx@txxxxxk.fr </a>| s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">www.txxxxxk.fr </a>
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
<a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
类似这样的方法可能会奏效，只需将底部内容放在自己的行中。
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; border-bottom: 1px #3d3d3d dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d; " >
<tr>
<td style="padding: 6px 0 0 0" >
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr"><img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size:12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f;letter-spacing: 1px">TxxxxK</strong><br>
e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration:none; border-bottom:1px dotted #000000;color:#000000">oxxxxx@txxxxxk.fr </a> | s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration:none; border-bottom:1px dotted #000000;color:#000000">www.txxxxxk.fr </a><br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
</td>
</tr>
<tr>
<td colspan="2"><a href="http://twitter.com/Txxxxk"><img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk"><img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk"><img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a><br />
<a href="http://www.txxxxk.fr"><img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
</tr>
</table>
<table id="sig" style="min-width: 960px; min-height: 82px; line-height: 18px; margin: 6px 0; padding: 8px; border-top: 1px #15345B dotted; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-size: 12px; color: #3d3d3d;">
<tr>
<td style="padding: 6px 0 0 0">
<a href="http://www.txxxxk.fr" title="www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/defweb_logotaldeak-red3.png" alt="Txxxxk" style="float: left; padding: 6px 20px 0 0; border: none;"></a>
</td>
<td style="padding: 6px 0 0 0">
<span style="font-size: 12px"><strong style="color: #000000; letter-spacing: 1px">Oxxxxxx xxxxxy</strong>, CEO</span><br>
<strong style="color: #d80f0f; letter-spacing: 1px">TxxxxK</strong><br>
e: <a href="mailto:oxxxxx@txxxxxk.fr" title="oxxxxx@txxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">oxxxxx@txxxxxk.fr </a>| s: <a href="http://www.txxxxxk.fr" title="www.txxxxxk.fr" style="text-decoration: none; border-bottom: 1px dotted #000000; color: #000000">www.txxxxxk.fr </a>
<br>
t.: 0xxxxxxxx0 | m.: 0xxxxxx5<br>
5 xxxxxx - 6xxxxx Bxxxx<br>
<a href="http://twitter.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/t.png" alt="Twitter" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://facebook.com/Txxxxk">
<img src="https://img.newoldstamp.com/s/d/f.png" alt="Facebook" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
<a href="http://linkedin.com/company/txxxxk">
<img src="https://img.newoldstamp.com/s/d/l.png" alt="Linked In" style="float: left; margin: 2px 4px 0 0; border: none;"></a>
</td>
</tr>
</table>
<table style="border-bottom: 1px #3d3d3d dotted; margin: 0px 0 6px; min-width: 960px;">
<tr>
<td align="left"><a href="http://www.txxxxk.fr">
<img src="http://www.txxxxk.fr/wp-content/uploads/2015/12/banner-signature-2016.png" alt="Vxxxxxt" style="float: left; margin: 2px 4px 0 0; border: none;"></a></td>
</tr>
</table>
您正在使用一个 table 行来显示需要两行的外观，您还需要在第一个 tr 中使用两个 td 标签以使徽标和文本彼此相邻：
可以这样想：
<行（TR）>
< DATA (TD)> < DATA (TD) >
< / 行（TR）>
<table>
<tr>
<td><!-- logo goes here --></td>
<td><!-- contact info goes here --></td>
</tr>
<tr>
<td><!-- Banner goes here --></td>
</tr>
</table>