HTML电子邮件的图像左对齐问题

Question

编码和学习如何创建HTML电子邮件的新手。我随机挑选了一封电子邮件，并试图复制它。

我正试图将谷歌图片与Apple Play商店图片对齐，并将社交媒体图标都放在左边。

我搜索过W3、谷歌和Stack Overflow。我试着加了填充物。

感谢您的帮助。

<tr>
<td>
<img src="/img/applestorelogo.png" width="auto" height="24" style=" display: inline-block;" alt="applestorelogo"/>
</td>
<td>
<img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
</td>
<td><img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>
</td>
<td><img src="/img/IG.png" width="auto" height="24" alt="instagram"/>
</td>
<td><img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
</td>
</tr>

下面是图像

Answer 1

在我看来，您应该只使用三个<td>。

以下是您的场景的想法。您可能需要根据您的布局更改宽度：

<table border="1" style="width:50%">
<tr>
<td style="text-align: center; width: 5%;">
<img src="/img/applestorelogo.png" width="auto" height="24" alt="applestorelogo"/>
</td>
<td style="text-align: center;width: 5%;">
<img src="/img/googlestore.png" width="auto" height="24" alt="googlestore"/>
</td>
<td style="text-align: right;">
<img src="/img/fb.png" width="auto" height="24"  alt="facebook"/>  
<img src="/img/IG.png" width="auto" height="24" alt="instagram"/>  
<img src="/img/twitter.png" width="auto" height="24" alt="twitter"/>
</td>
</tr>
</table>

Answer 2

<tr style="display: inline-block;">
<td>
<img style="border: 2px red solid" src="/img/applestorelogo.png" alt="applestorelogo"/>
</td>
<td>
<img style="border: 2px red solid" src="/img/googlestore.png" alt="googlestore"/>
</td>
<td>
<img style="border: 2px red solid" src="/img/fb.png" alt="facebook"/>
</td>
<td>
<img style="border: 2px red solid" src="/img/IG.png" alt="instagram"/>
</td>
<td>
<img style="border: 2px red solid" src="/img/twitter.png" alt="twitter"/>
</td>
</tr>

无视边界。我用它来排除故障。