Мне нужна помощь Alignin 2 TD в моей электронной почте Подпись HTML - PullRequest
Новая
       91

Мне нужна помощь Alignin 2 TD в моей электронной почте Подпись HTML

1 голос
/ 12 апреля 2020

В течение некоторого времени я разрабатывал этот простой код HTML, чтобы использовать его в качестве подписи в письме. Недавно я добавил фотографию .gif и ссылки, чтобы она выглядела лучше. Я не могу поставить значок Instagram и значок WhatsApp рядом, я много чего перепробовал на inte rnet, но не смог сделать это.

Вот код для моя 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: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>

1 Ответ

0 голосов
/ 12 апреля 2020

Если вы хотите, чтобы обе ваши иконки социальных сетей находились на одной строке, одним из способов было бы сначала удалить закрывающую строку </tr> / открыть новую строку <tr> между ними (я сделал это во фрагменте. После этого, поместите ваши значки в левую часть социальной иконки tds (добавьте float:left; в свой стиль с размером шрифта и семейством), и тогда у вас должно получиться go. Я добавил небольшое поле слева (10px) к WhatsApp, чтобы поставить небольшое пространство между ними. Я также удалил отступ 100px из 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>
...