htmlhtml-tableoutlookmailing
How to fix a gap in two HTML tables in Outlook
<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> </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 >
</td>
</tr>
<tr>
<td style="border-top: solid #6A2E92 2px; border-left: solid #6A2E92 2px;" >
</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 >
</td>
</tr>
<tr>
<td style="border-top: solid #6A2E92 2px; border-right: solid #6A2E92 2px;" >
</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" > </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ónico ha sido enviado a <br>
Infórmese sobre la garantía estatal de los depósitos en su banco<br>
Nuestros e-mails no contienen enlaces<br>
Para anular su suscripción, haga click aquí:<br>
Si considera que este mail contiene material abusivo, haga click acá:<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> </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 >
</td>
</tr>
<tr>
<td style="border-top: solid #6A2E92 2px; border-left: solid #6A2E92 2px;" >
</td>
</tr>
<tr>
<td style="border-left: solid #6A2E92 2px;">
</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 >
</td>
</tr>
<tr>
<td style="border-top: solid #6A2E92 2px; border-right: solid #6A2E92 2px;" >
</td>
</tr>
<tr>
<td style="border-right: solid #6A2E92 2px;" >
</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" > </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ónico ha sido enviado a <br>
Infórmese sobre la garantía estatal de los depósitos en su banco<br>
Nuestros e-mails no contienen enlaces<br>
Para anular su suscripción, haga click aquí:<br>
Si considera que este mail contiene material abusivo, haga click acá:<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
- I am a beginner and I just started to learn java servlets and jsp. Can someone help me find the error in this code?
- How to prevent text moving when transitioning sibling element's width
- Printing a HTML template as PDF - Angular 2
- MJML : Outlook 1px horizontal when using direction rtl on mj-section
- HTML dialog focusing button element when opened
- Dynamic html and js
- Input regex for UK postcodes constantly invalid
- Put a star notation in a HTML page
- Can I have an onclick effect in CSS?
- Tailwind CSS height screen in mobile browser
- How do I tell if an HTML element has gone off the bottom of a page?
- Why select is not a input type in HTML?
- Margin different in Windows (Chome, Edge, etc.) and Mac OS (Safari)
- Print only html table using javascript
- How do I use the reverse border radius at the top of a card? (CSS)
- Allow only numbers into a input text box
- Stacked Bootstrap progress to show multiple ranges with tooltip
- Anchor link only works by "Open link in new tab" command
- How to block +,-,e in input type Number?
- Printing a webpages raw html data unformatted with tags and similar information
- Creating an end screen for my game using javascript, css, and html
- How do I include a HTML file in a Jinja2 template?
- CSS table layout: why does table-row not accept a margin?
- Add fontawesome to shadowroot of webcomponent
- Darkening an image when clicked is requiring an initial click on that image, and I don't know why
- Adding margins between Bootstrap columns
- css border: 1px appear as 0.667px or 1px depending on the computer / display resolution (?)
- Button to download file and redirect to new page
- How to insert row with attributes using table.insertRow?
- Pass objects/vars between Page_PreInit and Page_Load