I have a table alignment I’m having trouble doing what I want it to do. Below is what I have, but I want the cell with 1 in it to hug the top the whole table while I want the cell with 2 in it to hug the bottom baseline of the table. Cell 3 may have variable height. Anyone know how this possible? Probably something simple I’m missing but having figured it out yet.
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top">
<table cellpadding="0" cellspacing="0" border="0" width="50">
<tr>
<td>1
</td>
</tr>
<tr>
<td>2
</td>
</tr>
</table>
</td>
<td height="200" width="50">3
</td>
</tr>
</table>
You need to add a height="100%" on your tables, along with some valign attributes on the cells.
<table cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td>
<table cellpadding="0" cellspacing="0" border="0" width="50" height="100%">
<tr>
<td valign="top">1
</td>
</tr>
<tr>
<td valign="bottom">2
</td>
</tr>
</table>
</td>
<td>
<table><tr><td height="200" width="50">3</td></tr></table>
</td>
</tr>
</table>
Ah figured it out:
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="300" height="19">1</td>
<td width="300" rowspan="2">
<br>
<br>
3<br>
<br>
</td>
</tr>
<tr>
<td valign="bottom">
<table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>2</td>
</tr>
</table></td>
</tr>
</table>
Related
I'm working on some code written by someone else and I have a 3 block element that I need to change.
I'm trying to change the first block height to only goes as big as the image is.
I can't find any way of controlling the height of the blocks and can't figured out what is setting up the height.
If you have any suggestions please help.
Thanks!
<!--[if mso]><table border="0" cellpadding="0" cellspacing="0" align="left" style="mso-table-lspace:0pt; mso-table-rspace:0pt; border-collapse: collapse; width: 100%"><tr><td style="width: 100%;"><![endif]-->
<div style="float: left; width: 100%" class="sapMktBlock">
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%;" bgcolor="#FFFFFF">
<tbody>
<tr>
<td style="font-size:0px" class="nomob"> </td>
<td width="640" align="center" style="width:640px;min-width:640px;" class="wrapto320px">
<table role="presentation" width="100%" border="0" cellspacing="0" cellpadding="0" style="min-width:100%; " class="wrapto320px">
<tbody>
<tr>
<td align="left">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<th bgcolor="red" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1976">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1976mob" width="1" style="display:block;" class="wrapto100pc" alt="1976">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1996">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1996mob" width="1" style="display:block;" class="wrapto100pc" alt="1996">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We launch our Against Animal Testing campaign.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
<th bgcolor="#f8f3e8" class="colsplit" style="width:213px;vertical-align: top;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 0px 0px 0px;">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998" width="213" height="auto" style="display:block;height:auto;" class="nomob" alt="1998">
<div style="width:0; overflow:hidden; float:left; display:none; max-height:0px; mso-hide:all;" class="show">
<img src="https://i1.adis.ws/i/thebodyshop/UK_trigger_WelcomeCJ_Day0_GroupADiscount_story_1998mob" width="1" style="display:block;" class="wrapto100pc" alt="1998">
</div>
</td>
</tr>
<tr>
<td align="center" valign="top" class="mobheightclear">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:20px 20px 0px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" style="padding:0px 0px 10px 0px; font-family:Helvetica, Arial, sans-serif;font-size:14px;line-height:20px;color:#004236;" class="textcenter">
We celebrate 50 years of human rights with Amnesty International.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center" valign="top">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="left" valign="top" style="padding:0px 20px 10px 20px;">
<table width="100%" style="min-width:100%;" border="0" cellspacing="0" cellpadding="0">
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td style="font-size:0px" class="nomob"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if mso]></td></tr></table><![endif]-->
You can't change the height of the first block(the red one) as it is a cell in the row of a table. You'll probably have to use <div> element to manipulate the height factor.
Refer to this post for more details Change Height of a <td> without affecting the whole row height
Also, If your primary concern is the whitespace below the image in the first block, you can either 1) add some content below or 2) remove the "vertical-align: top;" inline-css property of the red block's <th> tag, which will align your image at the center of the cell.
Hope this helps!
I am trying build my first HTML email. I want the masthead graphic to be flush against the edge of the cell but there is a small white border that I can seem to get rid of. What can be done about this?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="10" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table border="0" bgcolor="white" cellpadding="" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0">
</td>
</tr>
</tbody>
</table>
<table border="1" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="1" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
First remove the margin from the page by adding style="border: 0px" then add cellspacing and cellpadding to the table and all parent tables.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body style="margin:0px">
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" cellpadding="0" cellspacing="0" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0">
</td>
</tr>
</tbody>
</table>
<table border="1" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="1" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
I have made a few changes to your table. Removed table borders so the tables dont show the borders around every cell and the table itself. Also all images need to have style="display:block" so there is no extra spaces around it.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http//www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
</head>
<body>
<!-- Wrapper (pseudo body tag) -->
<table border="1" align="center" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" valign="top" width="100%">
<!--Body Table-->
<table border="0" bgcolor="black" cellpadding="10" cellspacing="0" width="">
<tbody>
<tr>
<td align="center" valign="top" width="">
<!--Content Table-->
<table border="0" bgcolor="white" cellpadding="0" cellspacing="0" width="">
<tbody>
<tr>
<td lign="center" valign="top" width="">
<table width="" border="0" cellpadding="" cellspacing="0" bgcolor="black">
<tbody>
<tr>
<td align="center" valign="top" width="">
<img src="https://docs.google.com/uc?id=0B3ruYAyZeJR3clo3dmJUbW5Ya1E" vspace="0" hspace="0" style="display:block;">
</td>
</tr>
</tbody>
</table>
<table border="0" bgcolor="white" align="center" cellpadding="" cellspacing="0" width="600">
<tbody>
<tr>
<td align="center" valign="top" width="600">
<p>subhead</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr> <tr>
<td align="center" valign="top" width="600">
<p>Story</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>Picture</p>
</td>
</tr>
<tr>
<td align="center" valign="top" width="600">
<p>divider</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--End Content Table-->
<!--Footer Table-->
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer1</p>
</td>
</tr>
<tr>
<td style="color:white" align="center" valign="top" width="">
<p>footer2</p>
</td>
</tr>
</tbody>
</table>
<!--End Footer Table-->
</td>
</tr>
</tbody>
</table>
<!--End Body Table-->
</td>
</tr>
</tbody>
</table>
</body>
</html>
Let me know if this helps.
You need to add:
cellpadding="0" cellspacing="0" border="0"
to all of your tables (unless you're intentionally adding cellpadding etc) - that gets rid of the extra spacing.
Then you should also set all images to have an inline style of display:block;
I just tested that, and it got rid of the extra spacing :)
I am trying to create a table where the left column is pushed top to fit its contents. Note that the right column requires to be height=300.
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 3rd cell
</td>
</tr>
</table>
This is what I have come out so far: https://jsfiddle.net/5y33rtm3/1/
Desired outcome:
You can add rowspan="5" for the third row in the left:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" rowspan="5"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
or you can add height: 100% to it:
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td valign="top" width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="7" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" width="65%" style="height: 100%"> <!-- CHANGED HERE -->
This is my 3rd cell
</td>
</tr>
</table>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td width="65%">
This is my 1st cell
</td>
<td valign="top" width="35%" height="300" rowspan="3" align="right">
This is long cell
</td>
</tr>
<tr>
<td valign="top" width="65%">This is my 2nd cell</td>
</tr>
<tr>
<td valign="top" style="height:100%" width="65%">
<img src="ant.jpg" style="height:40%;width:40%;" />
</td>
</tr>
</table>
Specifically, the main header is separate from the imagery and footer of the email, pushed too far left for some reason. However, it works perfectly on all other email clients (See SendinBlue campaign builder preview).
Here is the full code I'm using for the address bar at the top:
<table class="ecxw320" align="center" border="0"
cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr bgcolor="#000000">
<td height="50">
<table align="center" border="0" cellpadding="0"
cellspacing="0">
<tbody>
<tr>
<td>
<table align="center" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;"><a
moz-do-not-send="true"
href="http://partofthekult.com/"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">
</a></td>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/tees"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TEES
</a></td>
<td width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/tanks"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">TANKS</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/accessories"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">ACCESSORIES
</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
<td class="ecxh" style="font-family:'Helvetica',
monospace;font-size:12px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;padding:10px;"><a
moz-do-not-send="true"
href="https://partofthekult.com/collections/sale"
target="_blank"
style="font-family:'Helvetica',
monospace;font-size:15px;line-height:15px;color:#FFFFFF;text-align:center;text-decoration:none;white-space:nowrap;">SALE</a></td>
<td class="ecxh" width="0">
<table align="center" border="0"
cellpadding="0" cellspacing="0"
width="2">
<tbody>
<tr>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Images of how it renders on my iPhone 6s:
First Image
Second Image
I have designed a email template but I am facing alignment issue on iPhone 5 and yahoomail .The contents could not be aligned to center. I am using reply manager to send email template.
Heres my code :
<table align="center" border="0" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/brochure.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Handing out brochures is a very cost-effective way to advertise your brand.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- End Image 1 -->
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/imggz2.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Wow clients by using an animated logo for your website or email.</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 2 -->
</tbody>
</table>
<table align="left" style="width:2%">
<tbody>
<tr>
<td> </td>
</tr>
</tbody>
</table>
<table align="left" border="1" style="width:32%">
<tbody>
<tr>
<td>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><p><img alt="" src="http://websamplenow.com/30/logoloftems/images/invite.jpg" style="height:157px; width:170px" /></p></td>
</tr>
<tr>
<td><p style="text-align:center"><span style="font-size:14px">Promoting events means attracting people. You need attractive designs!</span></p></td>
</tr>
<tr>
<td>
<table align="center">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/readmore.jpg" /> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<!-- End Image 3 -->
</tbody>
</table>
<!-- 3Column ends --><!--1 img starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="10" cellspacing="10" style="width:600px">
<tbody>
<tr>
<td style="text-align:center"><img src="http://websamplenow.com/129/ems1/images/moreinfo.jpg" style="width:60%" /></td>
</tr>
</tbody>
</table>
<!--1 img ends--><!--clients logo starts--><!--1 img ends--><!--clients logo starts--></td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_all.jpg" style="width:600px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
</tr>
</tbody>
</table>
<table align="center" cellpadding="0" cellspacing="0" style="width:600px">
<tbody>
<tr>
<td><img src="http://websamplenow.com/129/ems1/images/fc_microsoft.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_gilette.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_oreck.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_whirlpool.jpg" /></td>
<td><img src="http://websamplenow.com/129/ems1/images/fc_bluething.jpg" style="height:37px; width:98px" /></td>
<td dir="rtl"><img src="http://websamplenow.com/129/ems1/images/fc_oprah.jpg" style="height:37px; width:126px" /></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
</tr>
</tbody>
</table>
The button 3 boxes are not aligned to center.
Can anyone help me to solve it out?