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
Related
I am creating an email template and the header section of the email is a code block I took from another site.
The said header code block contains a logo and few text next to it. Here is an image of it.
In the editor of the Email Service Provider I use, the code block is fully visible but when I click on preview, the text dissapears and only the logo is visible like this
Does anyone know why is that.
Here is the code
`
<td class="esd-stripe" align="center">
<table class="es-header-body" align="center" cellpadding="0" cellspacing="0" width="550" style="background-color: #f6f3f0;" bgcolor="#f6f3f0">
<tbody>
<tr>
<td class="esd-structure es-p20" align="left">
<!--[if mso]><table width="560" cellpadding="0"
cellspacing="0"><tr><td width="98" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" class="es-left" align="left">
<tbody>
<tr>
<td width="98" class="es-m-p0r es-m-p20b esd-container-frame" valign="top" align="center">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center" class="esd-block-image es-m-txt-c" style="font-size: 0px;"><a target="_blank" href="https://viewstripo.email"><img src="https://ychxix.stripocdn.email/content/guids/CABINET_d3bb686276c9132ac5465c69a2399624/images/carla_logo.png" alt style="display: block;" width="65"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td><td width="20"></td><td width="442" valign="top"><![endif]-->
<table cellpadding="0" cellspacing="0" align="right">
<tbody>
<tr>
<td width="442" align="left" class="esd-container-frame">
<table cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr class="esd-mobile-hidden">
<td align="center" class="esd-block-spacer" height="16"></td>
</tr>
<tr>
<td class="esd-block-menu" esd-tmp-menu-color="#2d0824">
<table cellpadding="0" cellspacing="0" width="100%" class="es-menu">
<tbody>
<tr class="links">
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/" style="color: #169179;"><b>Home<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/contact" style="color: #169179;"><b>About<b></a></td>
<td align="center" valign="top" width="33%" class="es-p10t es-p10b es-p5r es-p5l"><a target="_blank" href="https://www.carlawainwright.com/about" style="color: #169179;"><b>Contact<b></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if mso]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
`
I tried to change the font color and backround color to see if that was overlapping the text, but it didnt work.
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
My email is comprised of a set of images - some full-width rows containing a full-width image, while other full-width rows contain two 50%-width images.
The single-asset rows are centering, but the 2-asset rows are not.
Any suggestions as to how to address this?
<table width="100%" bgcolor="#F9F8F8" cellpadding="0" cellspacing="0" border="0" align="center" style="padding:0;margin:0;border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<!-- SINGLE-WIDE Image, Flush : BEGIN -->
<tr>
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/0f9cfabb-011b-4af6-9962-0d097a3a884a.jpg" width="800" alt="" border="0" style="width: 100%;max-width: 800px;height: auto;display: block;vertical-align: text-top;" class="img-fullwidth">
</td>
</tr>
<tr>
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/c3fa45e0-1954-491a-b567-a0f39b19ea15.jpg" width="800" alt="" border="0" style="width: 100%;max-width: 800px;height: auto;display: block;vertical-align: text-top;" class="img-fullwidth">
</td>
</tr>
<!-- SINGLE-WIDE Image: END -->
<!-- DOUBLE-WIDE Image, Flush : BEGIN -->
<tr style="display:block;">
<td class="full-width-image" align="center" style="mso-table-lspace:0 !important;mso-table-rspace:0 !important;">
<table cellspacing="0" cellpadding="0" border="0" width="100%" >
<tr>
<td class="stack-column-center" align="center">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
<td style="padding:0px;text-align:center;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/80c28595-a6cc-43e1-9e5c-f581a77064f7.jpg" width="400" alt="" border="0" class="fluid" style="display: block;">
</td>
</tr>
</table>
</td>
<td class="stack-column-center">
<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="padding:0px;text-align:center;">
<img src="https://gallery.mailchimp.com/df9c3a35085c40dd1033b83bf/images/9e708022-b8f2-4528-89b0-95b51dd73caa.jpg" width="400" alt="" border="0" class="fluid" style="display: block;">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I am coding a menubar for an e-mail - therefore the messy tables. I need the two menuoptions "Point" and "My profile" to be aligned in the right side of the table:
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
JSFIDDLE
I have tried to set a text-align:right; on the a tag, the td tag, but I cannot get the two options to align right.
I can align them right if I set the text-align on the table. But then all the text are aligned right.
Does anybody have an idea what I am doing wrong here?
I think this will work for you -
I have put the inner table width to 100% and split you <a> tag to two <td> and gave them float.
<table class="organicweb1" style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="100%;">
<tbody>
<tr>
<td style="padding:10px 0px 10px 0px" align="center" valign="top">
<table style="border-collapse:collapse; border: 1px solid red;" cellspacing="0" cellpadding="0" border="0" align="center" width="600">
<tbody>
<tr>
<td align="left" width="35" valign="top"> </td>
<td align="center" width="590" valign="middle">
<table style="border-collapse:collapse" cellspacing="0" cellpadding="0" border="0" align="center" width="590">
<tbody>
<tr>
<td style="padding:7px 0px 7px 0px" align="center" valign="middle">
<table style="border-collapse:collapse;width:100%" cellspacing="0" cellpadding="0" border="0" align="left" width: "100%">
<tr>
<td style="font-family:Tahoma,Geneva,sans-serif;font-size:14px;line-height:120%;color:#512DA8;float:left" align="center" valign="top">
Book
<span> </span>
Gift
<span> </span>
Voucher
<span> </span>
<span> </span>
</td>
<td style="float:right">
<b>Point:</b>
<span> </span>
<b>My profile</b>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="35" valign="top"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Hope this is helpfull for you.
try this snippet:
<a href="http://example.com"
style=
"color:#004b60;
text-decoration:none;
background-color: red;
padding: 5px 10px 5px 10px;
margin-left:250px;"
target="_blank"><b>Point:</b>
</a>
use margin-left:250px; instead of text-align: right;
check the fiddle: https://jsfiddle.net/hfsd62eg/1/
I've got a HTML table with several cells inside, the border=0 property is set yet the border does not go away, what am I doing wrong?
<table width="500" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td>
<br><br>
</td>
</tr>
</table>
</td>
</tr>
</table>
Change the first cell spacing to 0
So here's the code:
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0"
bgcolor="#CCCCCC">
<tr>
<td>
<table width="100%" border="0" cellpadding="3" cellspacing="1" bgcolor="#FFFFFF">
<tr>
<td><br>
<br></td>
</tr>
</table>
</td>
</tr>
</table>