I am creating a responsive email template for that I need 6 Books in a row.
The width of main table is 600px, books table width is 15% and red highlighted table (for space between tables) width is 2%. All tables are left aligned.
Email is working fine in browser but not rendering in properly in Outlook here is screenshot below.
There is 1px space around the red table, please suggest a fix so it renders in a row & works fine in outlook 2016 and also in other version.
Outlook 2016 Example
Note: I tried using single table with 6 <td> but it wasn't working in Andorid 4.4, so that is why I am using this table structure.
/* MOBILE STYLES */
#media screen and (max-width: 520px) {
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
}
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
<tr>
<td>
<!-- TWO COLUMNS -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td valign="top" style="padding: 0;">
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<table width="2%" height="10" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="red" class="responsive-table">
<tr>
<td> </td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" border="0" width="15%" align="left" class="responsive-table">
<tr>
<td align="center"><img src="http://placehold.jp/85x120.png" alt="" width="85" border="0"></td>
</tr>
</table>
<!-- RIGHT COLUMN -->
</td>
</tr>
</table>
</td>
</tr>
</table>
You can try the following code for table, I suggest you, not to use multiple tables inside a table, instead use TD.
It may resolve your issue.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#media screen and (max-width: 520px) {
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" width="600" class="responsive-table" align="center" bgcolor="yellow">
<tr>
<td>
<!-- TWO COLUMNS -->
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
<td width="2%" bgcolor="red"></td>
<td width="15%">
<img src="http://placehold.jp/85x120.png" alt="" width="100%" border="0">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Snapshot 1
Snapshot 2
Snapshot 3
I'm editing a bought responsive email template. Below you can see the structure used.
The email is responsive on the web version and on desktop browser email clients. But when testing it on mobile email apps like Gmail, the structure breaks, and on Yahoo it displays the desktop version.
After cleaning up the code, and testing diferent versions... I think the problem is in the section where there is a background full width and then a normal width table with 2 images.
I tried putting the background on the top <table> and then on the <td> but it still don't work on mobile email apps like Gmail or Yahoo.
I don't know if I'm missing up something, or I'm doing something wrong. It only breaks on mobile email apps.
Thanks in advance.
Here is the code of the top section.
<table class="main-header" data-module="Header" data-bgcolor="Header" data-bg="Header" style="position: relative; opacity: 1; z-index: 0; background-image: url(https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg); background-size: cover; background-position: 50% 40%;" background="https://i.ytimg.com/vi/vUQUDS-TL6Q/hqdefault.jpg" width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td class="zay600" border="0" align="center" cellpadding="0" cellspacing="0">
<table cellspacing="0" cellpadding="0" align="center" border="0" width="90%" class="zay600">
<!-- img -->
<tbody><tr>
<td align="center">
<table align="center" class="zay600" width="600" border="0" cellspacing="0" cellpadding="0">
<!-- logo -->
<tbody><tr>
<td>
<table align="left" class="zay3-3" width="120" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="40">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center" valign="middle" style="line-height:0px;">
<img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="249" height="70" alt="img">
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--Space-->
<table width="1" height="30" border="0" cellpadding="0" cellspacing="0" align="left">
<tbody><tr>
<td height="30" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<p style="padding-left: 24px;">
</p>
</td>
</tr>
</tbody></table>
<table align="right" class="zay3-3" width="280" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="50">
</td>
</tr>
<!-- logo -->
<tr>
<td align="center">
<table class="zay-inner" width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;"><img style="display:block; font-size:0px; line-height:0px; border:0px;" src="http://www.dickson-constant.com/medias/images/catalogue/api/m654-grey-680.jpg" width="280" height="36" alt="img">
</td></tr>
</tbody></table>
</td>
</tr>
<!-- end logo -->
</tbody></table>
<!--End Space-->
</td>
</tr>
<!-- menu -->
<!-- end menu -->
</tbody></table>
</td>
</tr>
<!-- end logo -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
<!-- subtitle -->
<tr>
<td>
<!-- content -->
<table class="zay600" width="600" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody><tr>
<td align="center">
<table border="0" width="184" align="center" cellpadding="0" cellspacing="0" class="container580">
<tbody><tr>
<td align="center" valign="middle" style="line-height:0px;">
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
<tr>
<td align="center">
<!-- img -->
<table align="center" class="zay3-3" width="275" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td align="center" style="line-height:0px;">
</td>
</tr>
</tbody></table>
<!-- end img -->
</td>
</tr>
</tbody></table>
<!-- end content -->
</td>
</tr>
<!-- end subtitle -->
<tr>
<td height="100" class="header-td">
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
I have an issue with HTML email where gmail is puts a gap after my tables. It has been driving me crazy and tried nesting my tables in all kind of different way. Here is my code:
<html>
<head>
</head>
<body bgcolor="#000000" yahoo="fix">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style="margin:0 auto">
<tbody>
<tr>
<td width="600" style="background-color:#fafafa" bgcolor="#fafafa">
<table width="600" border="0" align="center" cellpadding="0" cellspacing="0" style="margin:0 auto">
<tbody>
<tr>
<td width="600">
<table width="600" cellpadding="0" cellspacing="0" border="0" bgcolor="#000000" style="background-color:#000000;margin:0 auto">
<tr><td>
<table align="top" border="0" cellpadding="0" cellspacing="0" width="600" height="auto">
<tr>
<td valign="bottom" width="600">
<table border="0" cellpadding="0" cellspacing="0" width="600" align="top">
<a href="#">
<tr>
<td width="600" align="center">
<img height="80" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img alt="" height="820" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img height="225" src="http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif" width="600" style="display:block;" />
</td>
</tr>
</a>
</table>
</td>
</tr>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body></html>
And this is how it looks like in gmail. I am trying to get rid of the black bar at the end of my html email. Seems to be very difficult...
Your HTML tags such as the table, tbody and tr did not close properly. I tried to send to myself via mailchimp with the updated one and no black bars I see from gmail's interface.
Updated one:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body bgcolor="#000000" yahoo="fix">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
align="center" style="margin:0 auto">
<tbody>
<tr>
<td width="600" style="background-color:#fafafa" bgcolor=
"#FAFAFA">
<table width="600" border="0" align="center"
cellpadding="0" cellspacing="0" style="margin:0 auto">
<tbody>
<tr>
<td width="600">
<table width="600" cellpadding="0" cellspacing=
"0" border="0" bgcolor="#000000" style=
"background-color:#000000;margin:0 auto">
<tr>
<td>
<table align="top" border="0"
cellpadding="0" cellspacing="0" width=
"600" height="auto">
<tr>
<td valign="bottom" width="600">
<table border="0" cellpadding="0"
cellspacing="0" width="600" align=
"top">
<tr>
<td width="600" align="center">
<img height="80" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img alt="" height="820" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
<tr>
<td width="600" align="center">
<img height="225" src=
"http://images5.fanpop.com/image/photos/26000000/Garfield-garfield-26077854-262-256.gif"
width="600" style=
"display:block;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I am working with the new responsive templates in dotmailer and all elements are now block tables, there are no multi-column tables. I want to stack a right table element over a left table element in a responsive environment while keeping the left/right arrangement on the desktop.
Here is the code for the full element I am working in
I have tried creating the element as a table with columns but cannot save the file when I do that, I have tried css with floats on table ids, the tables, td, and inline css, some of this configurations would flip the order on desktop not a phone. (I am looking specificaly at iphone6)
Is it possible to flip the stacking on block elements?
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row two-cols ee_columns ee_element" ee-type="container" data-title="2 columns" style="position: relative; background-color: rgb(174, 184, 194);">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" dir="ltr" style="padding: 0px 10px 0px 0px;"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:650px;" width="650" class="mso-table-width"><tr><td align="left" valign="top" style="width:331px;" width="320" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="51" style="max-width: 50.92%; min-width: 331px; width: 650px;" id="right-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_bottom">
<tbody>
<tr>
<td dir="rlt" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element" ee-type="element">
<tbody>
<tr>
<td align="left" class="element-pad element-bord" style="padding: 0px;"><img src="img" alt="" style="width: 100%; display: block; height: auto;" class="ee_editable vedpw331" ee-width="331" border="0" width="331" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td><td align="left" valign="top" style="width:325px;" width="325" class="column"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="49" style="max-width: 49.07%; min-width: 319px; width: 650px;" id="left-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_top">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer col-font-reset" ee-type="element">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" border="0" width="1" height="10" /></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p class="h3" style="text-align: left; font-size: 17px; color: rgb(255, 255, 255); line-height: 120%;"><b>Headline</b></p>
</div></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p style="font-size: 14px; color: rgb(255, 255, 255); line-height: 120%;" class="col-text">Text elements here</p>
</div></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:319px;" width="319" class="mso-table-width"><tr><td align="left" valign="top" style="width:319px;" width="330" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 20px;" alt="" class="" width="1" border="0" height="20" /></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="background-color: rgb(218, 222, 227);" dir="ltr" class="col-inner ee_dropzone" align="left"><table class="col-font-reset ee_element" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="element-pad element-bord" valign="top" align="left"><div class="ee_editable">
<p style="margin: 0px; text-align: center; font-size: 17px; color: rgb(83, 169, 172);"><b>Text Button</b></p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" width="1" border="0" height="10" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
There are a couple of ways of achieving this:
Method 1: I've found that the simplest way to achieve a reverse stack in email is to code your two columns into <th> tags, then with a class style the header cells to display as table-footer and table-header respectively.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
.thg{ display: table-header-group !important; width:100% !important; font-weight:normal;}
.tfg{ display: table-footer-group !important; width:100% !important; font-weight:normal;}
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320" bgcolor="#333333">
<tr>
<th class="tfg" bgcolor="#CCCCCC">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>left</td>
</tr>
</table>
</th>
<th class="thg" bgcolor="#999999">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>right</td>
</tr>
</table>
</th>
</tr>
</table>
</div>
Method 2: If keeping your content in block tables is important to you then you could use the below method. The tables are declared with the right table before the left and reordered using the direction style. This method will require VML to keep then inline on Outlook 2007, 10 and 13.
<style>
#media only screen and (max-width: 580px) {
.w320{ width:320px; }
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<td style="direction:rtl">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="direction:rtl">
<tr>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#CCCCCC">
<tr>
<td>right</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#999999">
<tr>
<td>left</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>
I want all the checkout button to be aligned evenly. Description of different products could be on 2 or 3 lines. And I want these button to stay on the same line. I tried to change line-height, but this affects all the buttons.
Here is a playground for that
<table border="0" cellpadding="0" cellspacing="0" width="650"><tbody><tr><td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="430"><tbody><tr><td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="210"><tbody><tr><td>
<img class="CToWUd" src="https://ci3.googleusercontent.com/proxy/1GKwB3DZSd0BPMDboD6iz7Ouq-wX00lP_G9TEUtJvjk3Gl5217FB6-q7E4qkCVjd5MVbYac2bUu9s5KrC8CNvpOQujvl5A-VraYMFfE8UzcBuw0O_MfbMdTOJhTWu9Rl5oVzd-4fVw=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-ROSE_GOLD_1.png" alt="" style="display:block" border="0" width="210">
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - ROSE GOLD
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr><tr><td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<strong>CHECKOUT</strong>
</td>
</tr></tbody></table></td>
</tr></tbody></table><table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210"><tbody><tr><td>
<img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/CL7UjYFnWe3FNZINIJJgPOVH18yP9nKSJZJdbbalv96XbhdRdiLweSYJ6DspRUu8KHjFGT9GCjVmgxAQY3Kpa7_aU5yUeMbdAha6dPGV4JVu16m2xSLjMgC3FA8qrs38xyWr1ygiyM0=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-WHITE_GOLD_1.png" alt="" style="display:block" border="0" width="210">
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - WHITE GOLD
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr><tr><td style="padding:20px 0 0; min-height: 100px;">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<strong>CHECKOUT</strong>
</td>
</tr></tbody></table></td>
</tr></tbody></table></td>
</tr></tbody></table><table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210"><tbody><tr><td>
<img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/oXpSdsWCQF_bW7AslUS7Fi71WwkcWjSpNklnWUJtDDgaxexkpoqVKaeIWTopPL8YfTZMqfOBV-jW7SV3DOGMi5Eq-o8FhU9JWH69-f-Ukh4dbVTeFoq9yCIuWWGmSwEOA6eaBgkxhzA=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/E/CET8D22-ROSE_GOLD_1.png" alt="" style="display:block" border="0" width="210">
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
5/16" Diamond Continuous Eternity Ring (Helix) - ROSE GOLD
</td>
</tr><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:30px;text-align:center">
$515.00
</td>
</tr><tr><td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<strong>CHECKOUT</strong>
</td>
</tr><tr><td height="15">
</td>
</tr></tbody></table></td>
</tr></tbody></table></td>
</tr></tbody></table>
http://codepen.io/anon/pen/vGpzVa
Thank you!
The simplest is to move the buttons to their own row.
<table border="0" cellpadding="0" cellspacing="0" width="650">
<tbody>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="430">
<tbody>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td>
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA==" target="_blank"
data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA%3D%3D&source=gmail&ust=1460215609004000&usg=AFQjCNHiQ7uePUKn7qMoF5xqlvjDP1zgyQ"><img class="CToWUd" src="https://ci3.googleusercontent.com/proxy/1GKwB3DZSd0BPMDboD6iz7Ouq-wX00lP_G9TEUtJvjk3Gl5217FB6-q7E4qkCVjd5MVbYac2bUu9s5KrC8CNvpOQujvl5A-VraYMFfE8UzcBuw0O_MfbMdTOJhTWu9Rl5oVzd-4fVw=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-ROSE_GOLD_1.png"
alt="" style="display:block" border="0" width="210"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - ROSE GOLD
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td>
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s" target="_blank"
data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s&source=gmail&ust=1460215609004000&usg=AFQjCNFtmdKjjV2n6xrI45EjJ6H9WBAXtA"><img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/CL7UjYFnWe3FNZINIJJgPOVH18yP9nKSJZJdbbalv96XbhdRdiLweSYJ6DspRUu8KHjFGT9GCjVmgxAQY3Kpa7_aU5yUeMbdAha6dPGV4JVu16m2xSLjMgC3FA8qrs38xyWr1ygiyM0=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/R/CR65_B-WHITE_GOLD_1.png"
alt="" style="display:block" border="0" width="210"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - WHITE GOLD
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:16px;text-align:center">
$110.00
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td>
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw="
target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw%3D&source=gmail&ust=1460215609004000&usg=AFQjCNGemmOPzKqjaMtL6JMsZ5o-WOOWLw"><img class="CToWUd" src="https://ci6.googleusercontent.com/proxy/oXpSdsWCQF_bW7AslUS7Fi71WwkcWjSpNklnWUJtDDgaxexkpoqVKaeIWTopPL8YfTZMqfOBV-jW7SV3DOGMi5Eq-o8FhU9JWH69-f-Ukh4dbVTeFoq9yCIuWWGmSwEOA6eaBgkxhzA=s0-d-e1-ft#https://www.venusbymariatash.com/media/catalog/product/C/E/CET8D22-ROSE_GOLD_1.png"
alt="" style="display:block" border="0" width="210"></a>
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
5/16" Diamond Continuous Eternity Ring (Helix) - ROSE GOLD
</td>
</tr>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:12px;color:#363636;line-height:30px;text-align:center">
$515.00
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="430">
<tbody>
<tr>
<td>
<table style="border-collapse:collapse" align="left" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA==" title="CHECKOUT"
style="color:rgb(255,255,255);text-decoration:none;display:inline-block;white-space:nowrap;padding:10px 50px;background-color:rgb(89,89,89);border-radius:5px" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtcm9zZS1nb2xkLWNyNjUtYi1yb3NlLWdvbGQuaHRtbA%3D%3D&source=gmail&ust=1460215609004000&usg=AFQjCNHiQ7uePUKn7qMoF5xqlvjDP1zgyQ"><strong>CHECKOUT</strong></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td style="padding:20px 0 0; min-height: 100px;">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s" title="CHECKOUT"
style="color:rgb(255,255,255);text-decoration:none;display:inline-block;white-space:nowrap;padding:10px 50px;background-color:rgb(89,89,89);border-radius:5px" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkYxNC1wbGFpbi1yaW5nLWVhcmxvYmUtd2hpdGUtZ29sZC1jcjY1LWItd2hpdGUtZ29sZC5odG1s&source=gmail&ust=1460215609004000&usg=AFQjCNFtmdKjjV2n6xrI45EjJ6H9WBAXtA"><strong>CHECKOUT</strong></a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table style="border-collapse:collapse" align="right" border="0" cellpadding="0" cellspacing="0" width="210">
<tbody>
<tr>
<td style="padding:20px 0 0">
<table border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px" align="center" bgcolor="#fff">
<a href="https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M=/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw="
title="CHECKOUT" style="color:rgb(255,255,255);text-decoration:none;display:inline-block;white-space:nowrap;padding:10px 50px;background-color:rgb(89,89,89);border-radius:5px" target="_blank" data-saferedirecturl="https://www.google.com/url?hl=en&q=https://app.remarkety.com/public/track/link/umk/NTcwNjdkNTdjMWJhMjIuODA4MDE3MzA1NzA2N2Q1N2M%3D/origurl/aHR0cHMlM0ElMkYlMkZ3d3cudmVudXNieW1hcmlhdGFzaC5jb20lMkY1MTYtZGlhbW9uZC1jb250aW51b3VzLWV0ZXJuaXR5LXJpbmctaGVsaXgtcm9zZS1nb2xkLWNldDhkMjItcm9zZS1nb2xkLmh0bWw%3D&source=gmail&ust=1460215609005000&usg=AFQjCNFsZwpDCF5k_yDAE66iSd1Sx1ObnQ"><strong>CHECKOUT</strong></a>
</td>
</tr>
<tr>
<td height="15">
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Try applying a fixed height to the td containing the item titles (if the line-height is 16px, and you want to give 3 lines of space, set a height of 48px);
<td style="height:48px;font-family:Arial,Helvetica,sans-serif;font-size:16px;color:#363636;font-weight:bold;line-height:16px;text-align:center;padding:0 0 15px">
1/4" Plain Ring (Earlobe) - ROSE GOLD
</td>
You may have to remove padding.
Failing these, you could pull out the buttons as a whole other row (so long as each column was the same width as the column in the table above so everything lined up)
try using valign="bottom" attribute