如何对齐 table 中的两列 | HTML 电子邮件签名
How to align two columns in a table | HTML Email Signature
我正在为我们的客户制作 HTML 电子邮件签名。我们需要对齐顶部和底部的两列。
- 底部的文字必须与社交媒体图标底部对齐
- 并且顶部的文字必须与徽标顶部对齐
我们浏览了论坛但无济于事。
<table id="escmadbirdies" rules="none" {finalexportlimited-width}="" border="0" cellspacing="0" cellpadding="0" style="border:0" width="500">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" style="border:0">
<tbody>
<tr>
<td valign="top" style="border:0">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:5px;line-height:20px">
<span style="font-family:Avenir;;font-size:20px;color:white;line-height:20px;font-weight:bold;background-color:black;padding-left:4px;padding-right:4px">
Clare Lavender<br>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:15px;line-height:15px">
<span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:4px;padding-right:4px">
<strong>Accounts Manager</strong>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:12px;line-height:15px">
<span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:3px;padding-right:3px">
t • 1300 722 896 / (02) 4732 4766<br>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:2px;line-height:15px">
<span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:3px;padding-right:3px">
a • Unit 6, 51 York Road Penrith NSW 2750<br>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:10px;line-height:16px">
<span style="font-family:Avenir;;font-size:16px;color:white;line-height:16px;background-color:black;padding-left:3px;padding-right:3px">
<a href="https://www.whiteriverdesign.com/" target="_blank" style="font-family:Avenir;;font-size:16px;color:white;line-height:18px;text-decoration: none">www.<strong>whiteriverdesign</strong>.com</a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" style="border:0">
<tbody>
<tr>
<td valign="top" style="border:0;padding-left:30px">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="center" style="white-space:nowrap;border:0;text-align:center">
<img src="https://katberg.com.au/wp-content/uploads/2021/01/WRD.gif" ; alt="" nosend="1" border="none" height="120" width="120">
</td>
</tr>
<tr>
<td valign="center" nowrap="" style="white-space:nowrap;border:0;text-align:center">
<a href="https://www.facebook.com/WRDCreative" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Facebook_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="10"></a>
<a href="https://www.instagram.com/WRDCreative/" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Instagram_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
<a href="https://www.linkedin.com/company/wrd" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/LinkedIn_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
<a href="https://www.youtube.com/user/whiteriverdesign" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Youtube_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="15"></a>
<a href="https://twitter.com/wrdcreative" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Twitter_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
请尝试使用单独的 css 文件。
Flexbox 可能更好用。或网格。
HTML 电子邮件将根据设备、电子邮件客户端、操作系统等不同呈现不同。所以像素完美并不总是可以获得的。
对于桌面，您只需测量右侧（图像）的高度，因为它们是固定高度，并在左侧中间应用额外的填充。
例如，您可以像这样向网址添加一些 padding-top：
<tr>
<td style="white-space:nowrap;border:0;padding-bottom: 0px;line-height:16px;padding-top: 20px;">
<span style="font-family:Avenir;;font-size:16px;color:white;line-height:16px;background-color:black;padding-left:3px;padding-right:3px">
<a href="https://www.whiteriverdesign.com/" target="_blank" style="font-family:Avenir;;font-size:16px;color:white;line-height:18px;text-decoration: none">www.<strong>whiteriverdesign</strong>.com</a>
</span>
</td>
</tr>
对于手机和平板电脑，您可能需要考虑堆叠这些列（完全重组），因为没有足够的 space 将两者并排放置。
我正在为我们的客户制作 HTML 电子邮件签名。我们需要对齐顶部和底部的两列。
- 底部的文字必须与社交媒体图标底部对齐
- 并且顶部的文字必须与徽标顶部对齐
我们浏览了论坛但无济于事。
<table id="escmadbirdies" rules="none" {finalexportlimited-width}="" border="0" cellspacing="0" cellpadding="0" style="border:0" width="500">
<tbody>
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" style="border:0">
<tbody>
<tr>
<td valign="top" style="border:0">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:5px;line-height:20px">
<span style="font-family:Avenir;;font-size:20px;color:white;line-height:20px;font-weight:bold;background-color:black;padding-left:4px;padding-right:4px">
Clare Lavender<br>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:15px;line-height:15px">
<span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:4px;padding-right:4px">
<strong>Accounts Manager</strong>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:12px;line-height:15px">
<span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:3px;padding-right:3px">
t • 1300 722 896 / (02) 4732 4766<br>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:2px;line-height:15px">
<span style="font-family:Avenir;;font-size:15px;color:white;line-height:15px;background-color:black;padding-left:3px;padding-right:3px">
a • Unit 6, 51 York Road Penrith NSW 2750<br>
</span>
</td>
</tr>
<tr>
<td nowrap="" style="white-space:nowrap;border:0;padding-bottom:10px;line-height:16px">
<span style="font-family:Avenir;;font-size:16px;color:white;line-height:16px;background-color:black;padding-left:3px;padding-right:3px">
<a href="https://www.whiteriverdesign.com/" target="_blank" style="font-family:Avenir;;font-size:16px;color:white;line-height:18px;text-decoration: none">www.<strong>whiteriverdesign</strong>.com</a>
</span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<table border="0" cellspacing="0" cellpadding="0" style="border:0">
<tbody>
<tr>
<td valign="top" style="border:0;padding-left:30px">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="center" style="white-space:nowrap;border:0;text-align:center">
<img src="https://katberg.com.au/wp-content/uploads/2021/01/WRD.gif" ; alt="" nosend="1" border="none" height="120" width="120">
</td>
</tr>
<tr>
<td valign="center" nowrap="" style="white-space:nowrap;border:0;text-align:center">
<a href="https://www.facebook.com/WRDCreative" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Facebook_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="10"></a>
<a href="https://www.instagram.com/WRDCreative/" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Instagram_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
<a href="https://www.linkedin.com/company/wrd" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/LinkedIn_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
<a href="https://www.youtube.com/user/whiteriverdesign" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Youtube_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="15"></a>
<a href="https://twitter.com/wrdcreative" target="_blank"><img src="https://katberg.com.au/wp-content/uploads/2021/01/Twitter_WRD1.png" ; alt="" nosend="1" border="none" height="20" width="18"></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
请尝试使用单独的 css 文件。 Flexbox 可能更好用。或网格。
HTML 电子邮件将根据设备、电子邮件客户端、操作系统等不同呈现不同。所以像素完美并不总是可以获得的。
对于桌面，您只需测量右侧（图像）的高度，因为它们是固定高度，并在左侧中间应用额外的填充。
例如，您可以像这样向网址添加一些 padding-top：
<tr>
<td style="white-space:nowrap;border:0;padding-bottom: 0px;line-height:16px;padding-top: 20px;">
<span style="font-family:Avenir;;font-size:16px;color:white;line-height:16px;background-color:black;padding-left:3px;padding-right:3px">
<a href="https://www.whiteriverdesign.com/" target="_blank" style="font-family:Avenir;;font-size:16px;color:white;line-height:18px;text-decoration: none">www.<strong>whiteriverdesign</strong>.com</a>
</span>
</td>
</tr>
对于手机和平板电脑，您可能需要考虑堆叠这些列（完全重组），因为没有足够的 space 将两者并排放置。