我需要帮助在我的电子邮件签名 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;">

  <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>

              <td style="padding-right: 100px; font-family: Verdana; font-size: 10pt;">

                <font style="color: #333333; font-size: 10pt; font-family: Verdana">Contato:&nbsp;

                  <font style="color: #333333; font-size: 10pt; font-family: Verdana"><a href="tel:[phone]" style="color: #06c">(21) 96407-9707</a></font>

              </td>

            </tr>

            <tr>

              <td style="padding-right: 50px; font-family: Verdana; font-size: 10pt;">

                <font style="color: #333333; font-size: 10pt; font-family: Verdana">&nbsp;

                  <font style="color: #333333; font-size: 10pt; font-family: Verdana"></font>

              </td>

            </tr>

            <tr>

              <td style="font-family: Verdana; float:left; font-size: 10pt;">

                <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>

              </td>

            

              <td style="font-family: Verdana; margin-left:10px; float:left; font-size: 10pt;">

                <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>

              </td>

            </tr>

    </tr>

    </tr>

    </tbody>

    </table>