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

Question

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

这是我的 HTML 签名的代码。

this is a screenshot of my signature

<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:thiago.dam@beattor.com.br" style="color: #06c">thiago.dam@beattor.com.br</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:21964079707" style="color: #06c">(21) 96407-9707</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">&nbsp;<font style="color: #333333; font-size: 10pt; font-family: Verdana"></font></td>
                </tr>

                <tr>
                   <td style="padding-right: 100px; font-family: Verdana; 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>
                </tr>

                <tr>
                   <td style=" font-family: Verdana; 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>

Answer 1

如果您希望两个社交图标都在同一行，一种方法是首先删除结束行 </tr>/ 在它们之间打开新行 <tr>（我已经在代码片段中完成。之后，将你的图标浮动在社交图标 tds 中（使用字体大小和系列将 float:left; 添加到你的样式中）然后你就可以开始了。我添加了一个小边距-left (10px) to the whatsapp one to put a small space between them. I also removed the 100px padding from the instagram.

希望对您有所帮助！

<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:thiago.dam@beattor.com.br" style="color: #06c">thiago.dam@beattor.com.br</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:21964079707" 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>

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

I Need Help Alignin 2 TD in My Email Signature HTML

html

email

signature

html-email