title: Transform signature with divs to table
body: <p>I have a small script that generates signatures for mail, but after testing the same in Outlook, it does not recognize the divs, and some other tags.</p>
  
  <p>I'm breaking my head and I can not simulate this signature on a table.</p>
  
  <p>can you help me? Please!</p>
  
  <p>Signature code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
  
  #sigCelu{
   position: absolute;
   left: 92px !important;
   top: -1px;
   width: 140px;
  }
  #new_sign{
      font-family: 'Roboto Condensed', sans-serif;
      width: 100%;
      height: auto;
      position: relative;
      color: #333333 !important;
      display: block;
  }
  
  #new_sign img{
      position: relative;
      display: block;
      margin-bottom: 5px;
  }
  
  #new_sign .barra{
      width: 3px;
      height: 150px;
      background-color: #004375;
      position: relative;
      display: block;
      float: left;
      margin-right: 5px;
  }
  
  #new_sign .barra2{
      width: 3px;
      height: 50px;
      background-color: #28aa76;
      position: relative;
      display: block;
      float: left;
  
  }
  
  #new_sign #info_sign{
      position: relative;
      display: block;
      margin: 5px 0px 0px 15px;
  }
  
  #new_sign #info_sign p span{
      position: relative;
      display: inline-block;
      margin-bottom: 5px;
  }
  
  #info_sign img{
      position: relative;
      display: block;
      width: 30px;
      height: 30px;
      margin-left: -5px;
      
  }
  
  .logos{
      margin-top: -7px;
      position: relative;
  }
  
  #info_sign .logos &gt; span{
      position: absolute;
      top: 12%;
      left: 23px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="new_sign"&gt;
                               &lt;img src="https://i.imgur.com/j4oT9Lz.png" id="sigFoto" alt="logo"&gt;
                                  &lt;i class="barra"&gt;&lt;/i&gt;
                                  &lt;i class="barra2"&gt;&lt;/i&gt;
                                      &lt;div id="info_sign"&gt;
                                          &lt;h3 id="sigName"&gt;Nome Aqui&lt;/h3&gt;
                                          &lt;p&gt;
                                              &lt;span id="sigTitle"&gt;Texto aqui /&lt;/span&gt;
                                              &lt;span id="sigCompany"&gt;Texto aqui&lt;/span&gt;
                                          &lt;/p&gt;
                                          &lt;div class="logos"&gt;
                                              &lt;img src="https://caoa.com.br/temp/images/icone-telefone.png" alt="#"&gt;
                                              &lt;span id="sigMobile"&gt;(11) 0000-0000&lt;/span&gt;
                                              &lt;span id="celular2"&gt;
                                                        &lt;span id="sigCelu"&gt;| (11) 90000-0000&lt;/span&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;div class="logos"&gt;
                                          &lt;img src="https://caoa.com.br/temp/images/icone-email.png" alt="#"&gt;
                                              &lt;span&gt;
                                                  &lt;a id="sigEmail"&gt;teuemail&lt;/a&gt;
                                              &lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;div class="logos"&gt;
                                          &lt;img src="https://caoa.com.br/temp/images/icone-email-site.png"&gt;
                                              &lt;span id="sigWebsite"&gt;www.site.com.br&lt;/span&gt;
                                          &lt;/div&gt;
                                          &lt;div class="logos"&gt;
                                          &lt;img src="https://caoa.com.br/temp/images/icone-email-local.png" alt="#"&gt;
                                              &lt;span id="sigAddress"&gt;Rua, &lt;span id="numero"&gt;2822&lt;/span&gt;, restante&lt;/span&gt;
                                          &lt;/div&gt;
                                      &lt;/div&gt;
                             &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I can not get familiar with these tables, I believe that because I started right in html5, without messing with tables so much, I've tried several times, consecutive hours working on the code and I do not get a result :(</p>