Email HTML Space between rows

user_16084155 0
Viewed 126

My purpose it's to create a main table who will contain different tables in it. This designe it's focused on emailing HTML.

This is my HTML code:

<table width="620" align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="620"  border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top" width="310">
                                <a href="https://www.nestlefamilyclub.es/?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NFC&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank" title="Nestlé Family Club">
                                    <img width="310" style="display:block" border="0" src="../img/211006_Nestle_Dark_Cupon_01.jpg" alt="Nestlé Family Club">
                                </a>
                            </td>
            
                            <td valign="top">
                                 <a href="https://nestlefamilyclub.es/marca/nestle-dark?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NestleDark&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank"  title="Nestlé Dark">
                                    <img width="310" src="../img/211006_Nestle_Dark_Cupon_02.jpg" alt="Nestlé Dark">
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td>
                    <img width="620" src="../img/211006_Nestle_Dark_Cupon_03.jpg" alt="Nescafé">
                </td>                   
            </tr>



 <tr>
        <table bgcolor="#70584b" width="620" align="center" cellspacing="0" cellpadding="0" border="0">
          <tr>
              <td bgcolor="#70584b" width="620" style="padding:0">
                    <img width="620" src="https://mi.nestle.es/gallery/120725221210600168/211006_Nestle_Dark_Cupon_10.jpg" alt="Nescafé" style="display: block; border:0"/>
               </td>
           </tr>
         </table>
                  
  </tr>
                                
                  
   <tr>
        <table width="620" align="center" cellspacing="0" cellpadding="0" border="0">
                      
           <tr>
                 <td bgcolor="#3a1301" width="37" style="padding:0">
                       <img width="37" src="https://mi.nestle.es/gallery/120725221210600168/211006_Nestle_Dark_Cupon_11.jpg" alt="Nescafé" style="display: block; border:0"/>                   
                  </td>
        
                   <td bgcolor="#000000" style="padding:0">
        
                       <a style="text-decoration: none;" href="https://nestlefamilyclub.es/marca/nestle-dark?utm_source=BdD&utm_medium=email&utm_content=D1_DescubreNuevosNestleDark&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank" title="A">
                              
                         <table bgcolor="#000000" width="500" align="center" cellspacing="0" cellpadding="0" border="0">
                              <tr>
                                    <td align="center" style="padding:0">
                                          <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                            <span style="color:#efb952">XXXXXXXX</span>
                                         </p>
                                     </td>
                               </tr>
                                  
                                  <tr>
                                       <td align="center" style="padding:0">
                                           <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                             <span style="color:#efb952">XXXXXXXX</span>
                                           </p>
                                       </td>
                                  </tr>
        
                                    <tr>
                                        <td align="center" style="padding:0">
                                            <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                                XXXXXXXX,
                                            </p>
                                        </td>
                                    </tr>
        
                                    <tr>
                                        <td align="center" style="padding:0">
                                            <p style="font-family:  Impact, Haettenschweiler, 'Arial Narrow Bold'; font-size:21px; color: #ffffff; font-weight: normal;">
                                                XXXXXXXX.
                                            </p>
                                        </td>
                                    </tr>
                                   
                             </table>
                          </a>
                      </td>
              </tr>
        </table>
    </tr>
 </table>

In my last rows I have this huge space on my Outlook Client.

When I see this code on my Outlook client, it shows a huge space between one row and another.

I hope somebody can help me!

enter image description here

html-email outlook html
1 Answers

Each of the images need display:block, i.e. <img ... style="display:block" ...>. See also Why not to use "vertical-align: top;" instead of "display: block;" on <img> in emails? for a more detailed discussion.

You may also need to add padding:0 to the <td>'s because some email clients have a slight padding.

If you are trying to make it responsive for mobiles, you'll need to allow the images to respond with a max-width or width:100%, e.g. <img ... style="display:block;max-width:100%;height:auto" ...>

For testing purposes, this works on Outlook 2007-19 (Windows) and Outlook Android, iOS:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
    <table width="620" align="center" border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>
                    <table width="620"  border="0" cellpadding="0" cellspacing="0">
                        <tr>
                            <td valign="top" width="310">
                                <a href="https://www.nestlefamilyclub.es/?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NFC&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank" title="Nestlé Family Club">
                                    <img width="310" style="display:block" border="0" src="https://via.placeholder.com/310x100" alt="Nestlé Family Club">
                                </a>
                            </td>
            
                            <td valign="top">
                                 <a href="https://nestlefamilyclub.es/marca/nestle-dark?utm_source=BdD&utm_medium=email&utm_content=Header_Logo_NestleDark&utm_campaign=NestleDark_PruebaloGratis_2110" target="_blank"  title="Nestlé Dark">
                                    <img width="310" style="display:block" src="https://via.placeholder.com/310x100" alt="Nestlé Dark">
                                </a>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>

            <tr>
                <td>
                    <img width="620" src="https://via.placeholder.com/620x100" alt="Nescafé">
                </td>                   
            </tr>
 </table>
</body>
</html>
user_89425660
Related