Monday, November 14, 2022

[FIXED] How to fix a gap in two HTML tables in Outlook

      , , ,      No comments   

Issue

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!


Solution

<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



Answered By - Javiera
Answer Checked By - Mildred Charles (PHPFixing Admin)

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...