我需要帮助在我的电子邮件签名 HTML 中对齐 2 TD

Question

一段时间以来，我一直在开发这个简单的 HTML 代码，将其用作我的签名电子邮件。最近我添加了 .gif 照片和链接，使其看起来更好。我无法将 Instagram 图标和 WhatsApp 图标并排放置，我在互联网上尝试了很多方法，但没有成功。

这是我的 HTML 签名的代码。

这是我签名的截图

<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">

    <tbody><tr>

        <td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle"><a href="https://beattor.com.br/"><img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block"></a></td>

        <td style="vertical-align: middle; padding-left: 10px;">

            <table cellspacing="0" cellpadding="1" border="0">

                <tbody><tr>

                    <td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">

                        <font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>

                    </td>

                </tr>

                <tr>

                    <td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">

                        <font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>

                    </td>

                </tr>

        

        <tr>

                    <td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Site:&nbsp;<a href="https://beattor.com.br/" style="color: #06c">beattor.com.br</a></font></td>

                </tr>

        

                <tr>

                    <td style="font-family: Verdana; font-size: 10pt;"><font style="color: #333333; font-size: 10pt; font-family: Verdana">Email:&nbsp;<a href="mailto:[e-mail]" style="color: #06c">[e-mail]</a></font></td>

                </tr>

        

        <tr>

Answer 1

如果您希望两个社交图标位于同一行，一种方法是首先删除它们之间的结束行</tr>/打开新行<tr>（我在代码片段中这样做了。之后，将图标浮动在社交图标 tds（float:left;使用字体大小和系列添加到您的样式中），然后您应该可以开始了。我在 Whatsapp 图标上添加了一个小的左边距（10px），以在它们之间留出一个小空间。我还删除了来自 Instagram 的 100px 内边距。希望这可以帮助！<table cellspacing="0" cellpadding="0" border="0" style="width: 590px;">&nbsp; <tbody>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td style="border-right: 2px solid #a9a9a9; padding-right: 0px; vertical-align:middle" valign="middle">&nbsp; &nbsp; &nbsp; &nbsp; <a href="https://beattor.com.br/"><img id="BeattorLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Gif-Assinatura-do-Email-2.gif" height="150px" walt="Beattor Comunicacao" style="display: block"></a>&nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; <td style="vertical-align: middle; padding-left: 10px;">&nbsp; &nbsp; &nbsp; &nbsp; <table cellspacing="0" cellpadding="1" border="0">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tbody>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="font-weight: bold; font-family: Verdana; font-size: 12pt; color: rgb(51, 51, 51);">Thiago Dam</font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding-bottom: 5px; font-weight: bold; font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="font-family: Verdana; font-size: 10pt; color: rgb(51, 51, 51);">CEO e Diretor Comercial</font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="font-family: Verdana; font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="color: #333333; font-size: 10pt; font-family: Verdana">Site:&nbsp;<a href="https://beattor.com.br/" style="color: #06c">beattor.com.br</a></font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="font-family: Verdana; font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="color: #333333; font-size: 10pt; font-family: Verdana">Email:&nbsp;<a href="mailto:[e-mail]" style="color: #06c">[e-mail]</a></font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato:&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="color: #333333; font-size: 10pt; font-family: Verdana"><a href="tel:[phone]" style="color: #06c">(21) 96407-9707</a></font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="padding-right: 50px; font-family: Verdana; font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="color: #333333; font-size: 10pt; font-family: Verdana">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <font style="color: #333333; font-size: 10pt; font-family: Verdana"></font>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="font-family: Verdana; float:left; font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://www.instagram.com/abeattor/"><img id="InstagramLogo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/Instagram-Logo-Beattor-Comunicacao.png" height="30px" walt="Instagram da Beattor" style="display:block; "></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td style="font-family: Verdana; margin-left:10px; float:left; font-size: 10pt;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="https://api.whatsapp.com/send?phone=5521964079707&text=Ol%C3%A1,%20tudo%20bem%3F%20Eu%20gostaria%20de%20mais%20informa%C3%A7%C3%B5es%20sobre%20a%20Beattor%20Comunicacao"><img id="WhatsApp Logo" data-class="external" src="https://beattor.com.br/wp-content/uploads/2020/04/WhatsApp-Logo-Beattor-Comunicacao.png" height="30px" walt="WhatsApp da Beattor" style="display:block;"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </tr>&nbsp; &nbsp; </tr>&nbsp; &nbsp; </tbody>&nbsp; &nbsp; </table>