5027 sujets

Sémantique web et HTML

Bonsoir/Bonjour,

Je viens de créer une signature mail en HTML, j'aimerais pouvoir l'intégrer sur Gmail mais je rencontre quelques soucis ...

Lorsque je copie colle ma signature dans les paramètres gmail tout vas bien, elle s'affiche correctement. Mais une fois enregistrée et quand je veux rédiger un mail, elle s'affiche en décalé. (cf capture)
J'ai fait un test avec Outlook et cela fonctionne bien ...
Je ne comprends pas trop d’où pourrai venir le problème !

Je vous partage le code html :

<table cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="background-color: #ffffff!important; border-collapse: collapse; border: 0;">
  <tbody>
    <tr style="font-family: 'Mada', sans-serif; font-size: 14px; color: #18341e;">
      <td style="padding-right: 20px; vertical-align: middle" valign="middle;">
        <img src="http://image.noelshack.com/fichiers/2018/51/1/1545078249-logo.png" alt="ANIGAÏDO" />
      </td>
      <td width="1%" bgcolor="#18341e" style="vertical-align: middle;" valign="middle"></td>
      <td style="padding-left: 20px; vertical-align: middle;" valign="middle">
        <table>
          <tbody>
            <tr>
              <td>
                <h1 style="font-size: 16px; margin: 0px;">Julien PIERRE</h1>
              </td>
            </tr>
            <tr>
              <td>
                <p style="margin-bottom: 7px; margin-top: 0px;">Directeur</p>
                Lab1
                <br>
                3 Rue Roland Garros
                <br>
                41000 BLOIS
                <br>
                06 25 73 06 33
                <br>
                <a href="mailto:anigaido@gmail.com" target="_blank" style="color: #18341e!important;">anigaido@gmail.com</a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
      <td style="padding-left: 20px; vertical-align: middle;" valign="middle">
        <table>
          <tbody>
            <tr>
              <td>
                <a href="https://www.facebook.com/anigaido.fr/" target="_blank">
                  <img src="http://image.noelshack.com/fichiers/2018/51/1/1545078249-facebook.png" alt="Facebook-Logo" style="">
                </a>
              </td>
            </tr>
            <tr>
              <td style="padding-top: 12px; padding-bottom: 12px;">
                <a href="  https://www.instagram.com/anigaido_officiel/"  target="_blank">
                  <img src="http://image.noelshack.com/fichiers/2018/51/1/1545078249-insta.png" alt="instagram-Logo">
                </a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="https://twitter.com/anigaido/" target="_blank">
                  <img src="http://image.noelshack.com/fichiers/2018/51/1/1545078249-twitter.png" alt="twitter-Logo" style="">
                </a>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>


Je vous remercie par avance Smiley smile
Hello, il y a tellement de règles à respecter dans les e-mails que c'est difficile à dire comme ça sans tester. Mais essaie déjà un width 100% sur tes <table>. Aussi, à chaque nouveau <table>, tu devras redéfinir font-family, taille de font, etc