-1

enter image description here

<html>
<head>
<title>Prueba</title>
 
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
 
</head>
 
 
 
<body>
<div align="center">
 
 
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="40" align="center"><span style="color:#999; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"></span></td>
    </tr>
  </table>
 
 
  <table width="650" border="0" align="center" cellpadding="25" cellspacing="0" style="border:1px solid #CCC;">
    <tr>
      <td>
    <table border="0" cellspacing="0" cellpadding="0" width="600">
          <tr>
            <td align="center" height="70">
              <table width="600" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><span style="color:#232272; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">{ESTIMADO_A} {NOMBRE}</span></td>
                 
                </tr>
              </table>
     
     </td>
          </tr>
     
     
<!-- HEADER -->      
          <tr>
            <td valign="top" width="600"  align="center" ><img src="img/image1.png" alt="Image1" width="600" height="516" /></td>
          </tr>
     
<!-- TXT  -->      
          <tr>
            <td valign="" width="600" height="0" align="center">
                <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="10" valign="middle" style="">
                            <p style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#555555; text-align:center; margin-top:0px;">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae. Quia odit facilis dignissimos voluptas ipsa itaque ex, quod quis impedit blanditiis dicta quaerat, illo voluptates fugit maxime sapiente vel.</p>
                        </td><br>
                    </tr>
              </table>
            </td>
          </tr>
             <tr>
                <td>&nbsp;</td>
            </tr>
          

        <!-- CONTENIDOS -->     
               <tr>
                <td>
                    
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="15%"  align="center">
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-left: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                 </table>
                            </td>
                            <td  align="center" valign="right" >
                                  <span style="color:#232272; font-size:16px; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong> Title 1</strong> </span>
                            </td>
                            <td width="15%"  align="center" >
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-right: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                 </table>
                            </td>
                        </tr>
                    </table> 

                </td>
            </tr>
            <tr>
                <td>
                    
                        <table width="100%" cellspacing="0" cellpadding="0" style="border-left: 2px solid #6A2E92; border-right: 2px solid #6A2E92; border-bottom: 2px solid #6A2E92;">
                                <tr>
                                     <td height="20" colspan="10" align="center" valign="top" bgcolor="#FFF" >&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 1</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Ingrese a <strong> ejemplo.cl</strong><br> con su rut y clave de acceso. </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong>2</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Diríjase al menú superior, opción <strong><br>Tarjeta de crédito o Cuenta corriente. </strong> </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 3</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Luego seleccione la opción: <strong>Encender <br> y apagar tarjetas</strong> y/o <strong>administrar zona geográfica. </strong></span><br><br>
                                    </td>
                                </tr>
                            </table>

                </td>
            </tr>
          
             

      </table>
    </td>
     </tr>
  </table>
 
<!-- /END BODY --> 
 
 
 
 
<!-- LEGAL -->  
 
  <table cellpadding="0" cellspacing="0" border="0" width="650">
    <tr><br>
   <img src="images/image2.jpg" alt="image2" width="650" height="125" title="o"/>
  
      <td><table width="650" cellpadding="0" border="0" cellspacing="0">
          <tr>
            <td>
        
             <br/>
              
              <img src="images/image3.jpg" alt="image3" width="650" height="49"><br/>
              <br/></td>
          </tr>
        </table>
        <table width="650" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="500" ><p style="width:650px;"> <span style="text-align:left;display:block;color: #999999; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"> Este correo electr&oacute;nico ha sido enviado a <br>
                Inf&oacute;rmese sobre la garant&iacute;a estatal de los dep&oacute;sitos en su banco<br>
                Nuestros e-mails no contienen enlaces<br>
                Para anular su suscripci&oacute;n, haga click aqu&iacute;:<br>
                Si considera que este mail contiene material abusivo, haga click ac&aacute;:<br>
                </span> </p></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
</body>
</html>

I have a problem with the html code that I create.

When I see my code in the browser, the border lines I added are seen continuously, but when I see this mail in Outlook, I see a gap in the tables as shown in the screenshot I attached.

Does anyone know how I can fix this?

PS: I Create two tables, in the first one you will find the span "title1" and in the second table, you will find several spans that create a number list.

Both tables have border.

In the case of table 1 the border, reach Title1 by the middle and table 2, have right, left and bottom border.

The problem appears when the border line joins table 1 and table 2.

Thanks! take care!

Martin
  • 16,093
  • 1
  • 29
  • 48
Javiera
  • 1
  • 3
  • Did you try to set margin to 0 in the style attributes of your tables : `margin-bottom: 0;` in the upper table and `margin-top: 0;` in the lower one ? – KBell Feb 01 '19 at 15:24
  • Yes, I tried it, but apparently, Outlook doesn't take into account the margins – Javiera Feb 01 '19 at 17:27
  • The problem is you are in quirks mode and using obsolete attributes among other things and you will continue to have issues despite your "fix" below. – Rob Feb 06 '19 at 13:39
  • Yeah, I totally agree. I know I'm using obsolete attributes but I can't do it in any other way, because the mail I'm creating have to be received in outlook and outlook is an obsolete email service. Sadly the majority of the enterprises still use it in my country so I have no say in it. The only option I have is trying to adapt myself and find the solution with obsolete methods. – Javiera Feb 06 '19 at 13:49

2 Answers2

0

A possible workaround: use one table instead of 2 ones.

Victor Ivanidze
  • 397
  • 2
  • 7
  • Yeah, I try but I can´t because I need to create a table with the first border that encounters the image in the middle and then the other table with the normal border. I couldn't manage to do it in another way, maybe if you have some idea it will be great! Edited: I found the problem! Thanks for your answer and for your help! I attach the code and the answer below in this post, in case you want to take a look Take care! – Javiera Feb 06 '19 at 13:27
0

<html>
<head>
<title>Prueba</title>
    
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    
</head>
    
    
    
<body>
<div align="center">
    
    
  <table width="650" border="0" align="center" cellpadding="0" cellspacing="0">
    <tr>
      <td height="40" align="center"><span style="color:#999;   font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"></span></td>
    </tr>
  </table>
    
    
  <table width="650" border="0" align="center" cellpadding="25" cellspacing="0" style="border:1px solid #CCC;">
    <tr>
      <td>
          <table border="0" cellspacing="0" cellpadding="0" width="600">
          <tr>
            <td align="center" height="70">
              <table width="600" border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><span style="color:#232272; font-size:13px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;">{ESTIMADO_A} {NOMBRE}</span></td>
                 
                </tr>
              </table>
              
              </td>
          </tr>
              
              
<!-- HEADER -->               
          <tr>
            <td valign="top" width="600"  align="center" ><img src="img/image1.png" alt="Image1" width="600" height="516" /></td>
          </tr>
              
<!-- TXT  -->                 
          <tr>
            <td valign="" width="600" height="0" align="center">
                <table width="600" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="10" valign="middle" style="">
                            <p style="font-family:Verdana, Arial, Helvetica, sans-serif;font-size:16px;color:#555555; text-align:center; margin-top:0px;">
                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, vitae. Quia odit facilis dignissimos voluptas ipsa itaque ex, quod quis impedit blanditiis dicta quaerat, illo voluptates fugit maxime sapiente vel.</p>
                        </td><br>
                    </tr>
              </table>
            </td>
          </tr>
             <tr>
                <td>&nbsp;</td>
            </tr>
          

        <!-- CONTENIDOS -->        
               <tr>
                <td>
                    
                    <table width="100%" border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td width="15%"  align="center">
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-left: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                        <tr>
                                             <td style="border-left: solid #6A2E92 2px;">
                                                    &nbsp;
                                             </td>
                                        </tr>
                                 </table>
                            </td>
                            <td  align="center" valign="right" >
                                  <span style="color:#232272; font-size:16px; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong> Title 1</strong> </span>
                            </td>
                            <td width="15%"  align="center" >
                                <table width="100%" cellspacing="0" cellpadding="0">
                                     <tr>
                                         <td >
                                                &nbsp;
                                         </td>
                                     </tr>
                                    <tr>
                                         <td style="border-top: solid #6A2E92 2px; border-right: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                      <tr>
                                         <td style="border-right: solid #6A2E92 2px;" >
                                                &nbsp;
                                         </td>
                                     </tr>
                                 </table>
                            </td>
                        </tr>
                    </table> 

                </td>
            </tr>
            <tr>
                <td>
                    
                        <table width="100%" cellspacing="0" cellpadding="0" style="border-left: 2px solid #6A2E92; border-right: 2px solid #6A2E92; border-bottom: 2px solid #6A2E92;">
                                <tr>
                                     <td height="20" colspan="10" align="center" valign="top" bgcolor="#FFF" >&nbsp;</td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 1</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Ingrese a <strong> ejemplo.cl</strong><br> con su rut y clave de acceso. </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> <strong>2</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Diríjase al menú superior, opción <strong><br>Tarjeta de crédito o Cuenta corriente. </strong> </span><br><br>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="25%" bgcolor="#FFF" align="center">
                                        <span style="color:#6A2E92; font-size:40px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"><strong> 3</strong></span><br><br>
                                    </td>
                                    <td width="75%"  bgcolor="#FFF" align="left">
                                        <span style="color:#6A2E92; font-size:15px; line-height:1.2; font-family: Trebuchet, Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;"> Luego seleccione la opción: <strong>Encender <br> y apagar tarjetas</strong> y/o <strong>administrar zona geográfica. </strong></span><br><br>
                                    </td>
                                </tr>
                            </table>

                </td>
            </tr>
          
             

      </table>
          </td>
     </tr>
  </table>
    
<!-- /END BODY -->  
    
    
    
    
<!-- LEGAL -->      
    
  <table cellpadding="0" cellspacing="0" border="0" width="650">
    <tr><br>
         <img src="images/image2.jpg" alt="image2" width="650" height="125" title="o"/>
        
      <td><table width="650" cellpadding="0" border="0" cellspacing="0">
          <tr>
            <td>
        
             <br/>
              
              <img src="images/image3.jpg" alt="image3" width="650" height="49"><br/>
              <br/></td>
          </tr>
        </table>
        <table width="650" border="0" cellpadding="0" cellspacing="0">
          <tr>
            <td width="500" ><p style="width:650px;"> <span style="text-align:left;display:block;color: #999999; font-size:11px; font-family:Verdana, Arial, Helvetica, sans-serif; padding:10px 0px; margin:0px;"> Este correo electr&oacute;nico ha sido enviado a <br>
                Inf&oacute;rmese sobre la garant&iacute;a estatal de los dep&oacute;sitos en su banco<br>
                Nuestros e-mails no contienen enlaces<br>
                Para anular su suscripci&oacute;n, haga click aqu&iacute;:<br>
                Si considera que este mail contiene material abusivo, haga click ac&aacute;:<br>
                </span> </p></td>
          </tr>
          <tr>
            <td></td>
          </tr>
        </table></td>
    </tr>
  </table>
</div>
</body>
</html>

I found the problem! It turns out that "title1" was using more space in the 'tr' in which it was contained. This means that if I write a bigger title, the table will be deformed.

I fix this, adding a new blank space above the "title1"

Thanks to all of you who took the time to write a comment and try to help me! :)

Thank you very much!

PS: I attach the code with the answer

Javiera
  • 1
  • 3