如何修复 Outlook 中两个 HTML 表格的差距

Question

<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>

我创建的 html 代码有问题。

当我在浏览器中看到我的代码时，我添加的边框线是连续的，但是当我在 Outlook 中看到这封邮件时，我看到 tables 中有一个空隙，如我的屏幕截图所示附上。

有谁知道我该如何解决这个问题？

PS：我创建两个 tables，在第一个中你会找到跨度 "title1"，在第二个中你会找到几个跨度 table创建一个号码列表。

两个table都有边框。

在table 1边框的情况下，中间到达Title1 table 2，有右边框，左边框和底边框。

边界线连接table 1和table 2时出现问题。

谢谢！保重！

Answer 1

可能的解决方法：使用一个 table 而不是 2 个。

Answer 2

<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>

我找到问题了！事实证明，"title1" 在包含它的 'tr' 中使用了更多的 space。这意味着如果我写一个更大的标题，table就会变形。

我解决了这个问题，在 "title1"

上方添加了一个新空白 space

感谢所有花时间写评论并试图帮助我的人！ :)

非常感谢！

PS: 我附上答案的代码

如何修复 Outlook 中两个 HTML 表格的差距

How to fix a gap in two HTML tables in Outlook

html

html-table

outlook

mailing