How to Reduce gap between 2 TR of table? - css

Question

I have structure as follows in fiddle.
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="20" style="width:100%;">
<tbody>
<tr style="text-align:justify;">
<td valign="top"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Hello,</span></font>
<br><br>
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Following contact form has been submitted.</span></font>
<div>
<font face="Arial,sans-serif!important" size="1">
<span style="font-size:13px;">
<div style="margin-top:5px;"> </div>
<table width="100%" border="0" cellspacing="0" cellpadding="2" style="width:100%;">
<tbody>
<tr>
<td align="left" valign="top" style="width:17%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name :</b></span></font></td>
<td align="left" valign="top" style="width:83%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">pratik </span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Email :</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1"><span style="font-size:12px;">p#d.com</span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Phone :</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font size="1"><span style="font-size:12px;">8</span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name of Facility:</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">wee</span></font></td>
</tr>
</tbody>
</table>
</span>
</font>
</div>
</td>
</tr>
<tr style="text-align:justify;">
<td valign="top">
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Thank you,</span></font>
<br>
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Admin</span></font>
</td>
</tr>
</tbody>
</table>
So I want to keep all alignment as it is Just move "Thank you,
Admin" Section to little top
I am working on Email Template,So inline CSS

Answer 1

you have cell-padding table attribute, change it to 0 then design your table by css

Answer 2

I think this is what you need
<table width="100%" border="0" cellspacing="0" style="width:100%;padding-left:20px;">
DEMO: http://jsfiddle.net/MX9TF/3/

Answer 3

remove some of your empty div, and br by cleaning up the markup .
http://jsfiddle.net/MX9TF/8/
<table>
<tbody>
<tr>
<td>
<p>Hello,
<br/>Following contact form has been submitted.</p>
<table>
<tbody>
<tr>
<th>Name :</th>
<td>pratik</td>
</tr>
<tr>
<th>Email :</th>
<td>p#d.com
</td>
</tr>
<tr>
<th>Phone :</th>
<td>8</td>
</tr>
<tr>
<th>Name of Facility:</th>
<td>awee</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<p>Thank you,
<br/>Admin</p>
</td>
</tr>
</tbody>
</table>
table {
font-family:"Arial,Helvetica,sans-serif";
font-size:12px;
color:#333;
width:100%;
text-align:justify;
}
table table th {
width:17%;
font-weight:bold;
}
Then you can tune and style your tables from style sheet with plain CSS.
:)

Answer 4

<td style="padding-top: 1px" valign="top">
Also, you could have mentioned in the question that css is not allowed, so that we wont think that way
One more thing worth mentioning. You could figure this with some development tools such as Firebug in Firefox. eg, open your html code in a browser, use firebug inspect to select your block, and it shows you have big space over your final td. You can also try to edit in on runtime using the firebug tool. It is a firefox plugin. If you don't have firefox, other browsers too have similar development tools

Answer 5

The quick answer is to remove the cellpadding="20" from your parent table and use padding or <br> on each cell instead. The cellpadding and cellspacing should only be used for zero-ing out as they do not render consistently in all clients.
There are also a whole bunch of little things you don't need in your code. Here is how it should look - this will work 100% in all email clients:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:30px;">
Hello,
<br><br>
Following contact form has been submitted.
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Name:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
pratik
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Email:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
p#d.com
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Phone:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
#
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Name of Facility:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
...
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-top:10px;">
Thank you,<br>
Admin
</td>
</tr>
</table>