I'm trying to place a table within a cell in an email, and cannot figure out how to limit the width of the inside table in Outlook. I've tried to use "The Hybrid Coding Approach" (http://labs.actionrocket.co/the-hybrid-coding-approach) and THINK I tried Outlook conditional statements correctly (http://labs.actionrocket.co/microsoft-outlook-conditional-statements). There's a lot of places where I'm seeing the conditional commenting for mso, but whenever I test the email in Litmus, Outlook still displays this giant set of images in the middle. What am I doing wrong? Any help would be greatly appreciated.
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">April is always <span class="highlighted" style="color: #518fce;">#BetterWithStraw</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">Introductory text.
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
<!-- End of content 1--> <!-- Start of content 2-->
<table style="border-collapse: collapse; text-align: left; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 12px; line-height: 15pt; color: #777777;" align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600">
<tbody>
<tr>
<td colspan="2" style="padding-top: 20px; padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" width="600">
<h2 style="font-family: 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 26px; line-height: 27pt; color: #555555; font-weight: 300; margin-top: 0; margin-bottom: 15px !important; padding: 0;">Vote <span class="highlighted" style="color: #518fce;">here</span>!</h2>
</td>
</tr>
<tr>
<td colspan="2" style="padding-right: 30px; padding-left: 30px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 15pt; color: #777777;" valign="top" width="255">
<!--[if mso>
<table width="540" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<![endif]-->
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="100%" /></th></tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="100%" /></td>
<td><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="100%" /></td>
</tr>
<tr><th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="100%" /></th></tr>
</tbody>
</table>
<!--[if mso>
</td>
</tr>
</table>
<![endif]-->
<div style="display: none;"> </div>
<table style="border-collapse: collapse; border-spacing: 0;" cellpadding="0" cellspacing="0" width="126">
<tbody>
<tr></tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" style="padding-top: 5px; font-size: 2px; line-height: 0px;" height="31" width="600"><img alt="" src="https://s3.amazonaws.com/AgileEmailTemplates/newsletter/rocketmail/Blue/Light-Background/images/divider.png" style="display: block;" align="left" height="31" hspace="0" border="0" vspace="0" width="600" /></td>
</tr>
</tbody>
</table>
Thank you!
The issue is that Lotus Notes, Outlook 2003, 2010 and 2016, needs to have a fixed width on any image. If you insert a 1280px wide retina image, and set it to 100% in width, then it will ignore the outside box, and just become 100% of its original width.
So what you need to do is make a width on each image like this:
<table style="width: 100%;" align="center" cellpadding="0">
<tbody>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514273836?id=tinymce_image_upload" width="536" /></th>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514291930?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514301534?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514313875?id=tinymce_image_upload" width="267" />
</td>
<td>
<img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514322076?id=tinymce_image_upload" width="267" />
</td>
</tr>
<tr>
<th colspan="2"><img src="https://s3.amazonaws.com/agilecrm/panel/uploaded-logo/1459514330960?id=tinymce_image_upload" width="536" /></th>
</tr>
</tbody>
</table>
And then with Media queries make it optimal for mobile
#media screen and (max-width: 480px) {
a img{
max-width:100% !important;
width:100% !important;
}
}
Related
I have a content block for an email that is not functioning as I want it to in Outlook. The block also needs to work in mobile and should look like this in browser/desktop:
.
In all browsers this looks perfect, except Outlook. In Outlook, it removes the entire white background colour from the button (it actually reduces it down to the text content) and it looks god awful:
Here is my code for the box:
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table bgcolor="#f5f5f5" border="0" cellpadding="0" cellspacing="0" class="w-full" width="640">
<tr>
<td width="20"> </td>
<td align="center">
<table border="0" cellpadding="0" cellspacing="0" dir="ltr" width="100%">
<tr>
<td class="full" dir="ltr" valign="top" width="50%">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH IMAGE PART-->
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
<tr>
<td align="center"> <img src="http://placehold.it/170x170" style="display: block; border: 0;" width="170"></td>
</tr>
<tr>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
</tr>
</table>
</td>
<td class="full" dir="ltr" valign="top" width="50%">
<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<!--TABLE WITH TEXT AND TITLE PART-->
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-22c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 20px; text-transform: uppercase;"> Lorem ipsum dolor</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td align="left" class="font-16c" style="font-family:'Century Gothic', Helvetica, Arial, sans-serif; color: #7e828c; font-size: 16px; line-height: 20px;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td height="20"> </td>
<td width="20"> </td>
</tr>
<tr>
<td width="20"> </td>
<td class="cta" bgcolor="" width="" style="-webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border: 0px;font-family: Century Gothic; padding-top: 0px; padding-bottom:0px; font-weight:;"> <a class="cta" href="http://www.example.com" style="padding: 10px; width:150px; display: block;text-decoration: none; border:0 ; text-align: center;font-weight: bold; font-size: 14px; font-family: Century Gothic, Helvetica, Arial, sans-serif; color: #8b8b93; background: #ffffff; border: 1px solid #8b8b93; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; line-height:30px;">LORUM IPSUM</a> </td>
<td width="20"> </td>
</tr>
<tr>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
<td height="15" style="font-size: 1px; line-height: 1px;"> </td>
<td style="font-size: 1px; line-height: 1px;" width="20"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td width="20"> </td>
</tr>
</table>
</td>
</tr>
And the class CTA is as follows:
cta {
margin: auto;
display: inline-block;
background:#ffffff !important;
}
/* BUTTON STYLES */
cta {
padding: 15px 15px;
width: 150px;
font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, sans-serif !important;
font-size: 14px;
font-weight: bold;
color: #8b8b93;
background: #ffffff !important;
border: 1px solid #8b8b93;
font-weight: bold;
align-content: center;
}
Unfortunately it requires a lot more code than it should to get a button displaying well and being clickable in Outlook. Something like this should do the trick (no CSS in the <style> necessary unless you want to do :hover effects):
<!-- Button : BEGIN -->
<table role="presentation" cellspacing="0" cellpadding="0" border="0">
<tr>
<td style="border-radius: 3px; background: #FFFFFF; text-align: center;">
<a href="http://www.google.com" style="background: #FFFFFF; padding: 15px; border: 1px solid #8b8b93; font-family: 'AvantGarde-demibold', 'Century Gothic', 'Arial Bold', Arial, font-size: 14px; line-height: 1.1; text-align: center; text-decoration: none; display: block; font-weight: bold;">
<span style="color:#8b8b93;">A Button</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
Honestly, the only way I've been able to get outlook HTML to look the way I want is to hand generate the HTML using roughly HTML2 standard tags and properties and not using CSS at all. Some CSS renders, but it's really hit or miss.
So I think is better to directly set the background-color to your Html tag than in your css file
I am trying to generate an html email being sent to customers. It renders find in most email clients but I am experiencing issues in Outlook Express and Outlook. Basically, I am trying to reserve two lines of space for my product link (two lines to be shown even if there is only one line of text). This works fine is other clients but not in these. Additionally, in outlook express the hyperlinks are always dark blue with a text underline. How can I standardize the size of the grid boxes along with fixing the hyperlink color. The color issue only happens in outlook express. The missing images are to remove logos from the posted image, this is not an issue.
<table width="600" align="center" cellspacing="0" cellpadding="0" style="width:600px;">
<tbody>
<tr>
<td>
<table width="290" align="left" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.examplecom/deal/usifhj6vPAYwqyziASU3bQ/la_giralda_guanaja 960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="company" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$525</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">Name of the product being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
<table width="290" align="right" border="0" cellspacing="0"
cellpadding="0" style="width:290px;background-color:#403E3E;">
<tbody>
<tr>
<td width="290" style="width:290px;"><a href=
"javascript:parent.onLocalLink('147d2e8a9b6c608e_',window.frameElement)">
<img src=
"https://img.example.com/deal/k44bFhz77oXnzEEcyTBW/y9-960x582/v1/t440x300.jpg"
border="1" width="290" height="180" style=
"border-width: 0px;" /></a></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0"
cellpadding="7" style="width:100%;">
<tbody>
<tr>
<td align="left" style=
"text-align:justify;"><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><img src="http://www.example.com/logo.png"
alt="Logo" style=
"border-width: 0px;" /></span></font></td>
<td align="right" style=""><font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">$1355</span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;"><a href="redir.aspx?C=Jezygmq7Nku0dS69lHHft1DXFwYci9EI6vwB1g6JI-sjWTq81HrEm2dti2OozSQmHVUiyLo1Br0.&URL=http%3a%2f%2f-featured_url-"
target="_blank">This is an example
product description for an item being
sold</a></span></font></td>
</tr>
<tr>
<td colspan="2" align="left" valign="top"
style="height:30px;text-align:justify;">
<font face=
"Myriad Pro,Helvetica,Arial,sans-serif"
size="1" color="white"><span style=
"font-size:13px;font-weight:normal;">Other
info</span></font></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td style=
"width:100%;height:15px;background-color:white;">
<span style="background-color:white;"> </span></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
The code used to generate these boxes are:
$html = '<table align="'.$side.'" border="0" cellpadding="0" cellspacing="0" class="BoxWrap" style="background-color: #403e3e" width="290">
<tbody>
<tr>
<td border="0" class="RespoImage_TwoThirdsW" width="290"><img alt="" border="0" class="RespoImage_TwoThirds" height="180" src="'.$params['image'].'" style="width: 290px; height: 180px; display: block;" width="290" alt="'.$params['title'].'" /></td>
</tr>
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" width="100%">
<tbody>
<tr>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 18px; text-align: left;"><img height="15" src="'.$this->siteurl.$params['provider']['logo'].'" style="height:15px;" alt="'.$params['provider']['provider_display'].'"></td>
<td border="0" bgcolor="#403e3e" style="background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: right;"><span>'.$params['price'].'</span></td>
</tr>
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
<tr>
<td border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">'.$this->create_location($params['location']['mapped_address']['address']['city'],$params['location']['mapped_address']['address']['state'],$params['location']['mapped_address']['address']['country']).'</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td border="0" bgcolor="#FFFFFF" class="RespoShowMedium" height="15" style="display:none;" width="100%"> </td>
</tr>
</tbody>
</table>';
I am going to give the exact row of the project description changes.
Instead of this
<tr>
<td align="justify" border="0" height="30" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; height:30px; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
'.$params['title'].'
</td>
</tr>
Use like this
<tr>
<td align="justify" border="0" height="60" valign="top" bgcolor="#403e3e" colspan="2" style="overflow: hidden; vertical-align:top; background-color: #403e3e; font-family: Myriad Pro, Helvetica, Arial, sans-serif; font-size: 13px; font-weight: normal; color: #FFFFFF; line-height: 15px; text-align: left;">
<span style="color:#fff;">'.$params['title'].'</span>
</td>
</tr>
I have a 3 column html email table see code below, everything aligns on the same row ok apart from one issue their a gap at the top of the last table column. The gap gets considerably worst going from outlook 2007 - 2013 the gap basically gets bigger.
My question is how do I eliminate this gap, to see what the problem more closely check it out here http://codepen.io/anon/pen/qdkel and hover over the third column.
Here is visual
http://take.ms/9qIva Outlook 2007
http://take.ms/a9FET Outlook 2013
CSS Resets
table {border-spacing:0;}
table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; }
table td, table tr { border-collapse: collapse; }
<tr>
<td align="center" valign="top" class="fix-box">
<!-- start LAYOUT-5 container width 600px -->
<table width="600" align="center" border="0" cellspacing="0" cellpadding="0" class="container">
<tbody><tr>
<td valign="top" width="100%">
<!-- start LAYOUT-5 container width 560px -->
<table width="560" align="center" border="0" cellspacing="0" cellpadding="0" class="full-width">
<!-- start image and content -->
<tbody><tr>
<td valign="top" width="100">
<!-- start content left -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image5_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold; text-align:left;
padding-left: 15px; padding-right: 15px;">
Embroidery
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style="color: #5f294f; font-weight: bold;
text-decoration: none;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="color: #5f294f; font-weight: 300;
text-decoration: none;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody>
</table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content left -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content center -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="left" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content center -->
<!-- start space width -->
<table class="remove" width="40" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" height="3" style="font-size: 0;line-height:
0;border-collapse: collapse;">
</td>
</tr>
</tbody></table>
<!-- end space width -->
<!-- start content Right -->
<table width="160" border="0" cellspacing="0" cellpadding="0" align="right" class="col-3" bgcolor="#ede8e7">
<tbody><tr>
<td width="100%" valign="top" align="left" class="image-160px">
<img src="http://passiondev.co.uk/email-newsletter/coats/imageplaceholder.jpg" width="160" alt="image6_280x210" style="max-width:100%;
display:block !important; " border="0" hspace="0" vspace="0">
</td>
</tr>
<!--start space height -->
<tr>
<td height="20"></td>
</tr>
<!--end space height -->
<tr>
<td>
<table border="0" cellspacing="0" cellpadding="0" align="left">
<tbody><tr>
<td style="font-size: 16px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#621a4b; font-weight:bold;
text-align:left; padding-left: 15px; padding-right: 15px;">
Crochet
</td>
</tr>
<!--start space height -->
<tr>
<td height="15"></td>
</tr>
<!--end space height -->
<tr>
<td style="font-size: 13px; line-height: 22px; font-family:
Arial,Tahoma, Helvetica, sans-serif; color:#808080; font-weight:300;
text-align:justify; padding-left: 15px; padding-right: 15px; ">
Phoomph makes creating decorations and costumes fast and
easy. Download our free e-book of 13 projects Halloween projects.
</td>
</tr>
<tr>
<td valign="top" width="auto">
<!-- start button -->
<table border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="auto" align="center" valign="middle" height="40" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma,
Helvetica, sans-serif; text-align:left; color:#5f294f; font-weight: 300;
padding-left: 15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: bold;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: bold;">
Read more
</span>
</a>
</td>
</tr>
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style=" text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
<!--start space height -->
<tr>
<td height="5"></td>
</tr>
<!--end space height -->
<tr>
<td width="auto" align="center" valign="middle" style="border-radius:5px; font-size:14px; font-family: Arial,Tahoma, Helvetica,
sans-serif; text-align:left; color:#5f294f; font-weight: 300; padding-left:
15px; padding-right: 15px; ">
<a href="http://www.makeitcoats.com" style="text-decoration: none; color: #5f294f; font-weight: normal;">
<span style="text-decoration: none; color: #5f294f;
font-weight: 300;">
Related link 1
</span>
</a>
</td>
</tr>
</tbody></table>
<!-- end button -->
</td>
</tr>
</tbody></table>
</td>
</tr>
<!--start space height -->
<tr>
<td height="20" class="col-underline"></td>
</tr>
<!--end space height -->
</tbody></table>
<!-- end content right -->
</td>
</tr>
<!-- end image and content -->
</tbody></table>
<!-- end LAYOUT-5 container width 560px -->
</td>
</tr>
</tbody></table>
<!-- end LAYOUT-5 container width 600px -->
</td>
</tr>
You should remove the heights from both the empty tables you have between your rows. Generally is a bad tactic defining heights in a newsletter! Also in your empty cells in newsletter always add two space characters.
<!-- start space width -->
<table class="remove" width="200" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse:
collapse;">
<tbody><tr>
<td width="100%" style="font-size: 0;line-height:
0;border-collapse: collapse;"> </td>
</tr>
</tbody></table>
<!-- end space width -->
I checked only in outlook, comment me if you have other problem.
http://jsfiddle.net/8Ws8V/2/
I am working on a HTML newsletter/email and have a question regarding different versions of Outlook (2007, 2010, 2011, 2013). The layout I want works on all other clients we have tested (using a 'deliverability test' which displays how it would look in clients).
Link to image of the differences:
http://jimharrison.co.uk/wp-content/uploads/2013/10/outlook.jpg
What I'm aiming for: To have the bottom of the phone sit on the last 'League point' text.
NOTE: image is set to stretch to 100%.
Outlook 2011: image is just under.
Outlook 2007, 2010: image is sitting far from bottom but the top of the image is aligned correctly.
Outlook 2013: image is way off and also there is unwanted spacing between 'League points' on the left.
Code:
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile">
<tr>
<td width="100%">
<!-- Column 1 -->
<table width="257" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="left" class="imageScale1">
<tr>
<td width="100%" height="10" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">
<span class="heading" style="font-size: 22px; color: #3B80C1; line-height: 22px;">It's time <br>to step it up a gear</span><br><br>
Starting on 1st November and running through to 29th December we've got "<span class="heading" style="color: #3B80C1;">Shake It Up Rio</span>" with Samsung offering 34 people the chance to soak up the sun in Rio, Brazil! As well as having the chance to party to the Samba beat, we also have weekly Best Incentive Points for Stores and Sales Advisors to win!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">Sell the Samsung Galaxy Note 3 smartphone and Galaxy Gear smartwatch, as well as the handsets listed below to earn league points and work your way up the league table!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Note 3 and Galaxy Gear
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
10 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
5 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4 mini
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
3 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Ace 3
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
1 League Points
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Padding + (Outlook) -->
<table class="eraseForMobile" width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<tr>
<td width="0" height="2" style="font-size: 0;line-height: 0;border-collapse: collapse;"><p style="padding-left: 10px;"> </p>
</td>
</tr>
</table>
<!-- Column 2 -->
<table width="270" border="0" cellpadding="0" cellspacing="0" align="right" class="imageScale2" bgcolor="#ffffff">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" class="mobileCenter">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
</tr>
</table>
Try this:
<tr>
<td width="50%" valign="top" bgcolor="#ffffff" class="mobileCenter">
... text ...
</td>
<td width="50%" valign="bottom" bgcolor="#ffffff">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;">
</td>
</tr>
Difficult for me to test this but it should work . . .
I always find putting images into different cells for emails to be quite effective.
To fix this issue:
Simply removed the width property and gave it the necessary height to fit with the text.
Because it's a responsive email this fix isn't perfect/ideal (I've had to play around with the CSS on the image so that it scales properly), but it's a fix nonetheless.
I am stuck with the attached e-mail HTML file as it does not render properly in thunderbird, sometimes in AOL, outlook, etc... (depending on the browser).
What I was trying to do here was to display a number of profiles for a dating website. All the emails I send are responsive so I wanted it to behave this way :
- 580px wide email : 4 profiles
- Tablet version : 3 profiles
- Mobile version : 2 profiles
To achieve this, I created a table (which width will vary according to the device it's read on) and inside I put 8 small tables, expecting that when the border of the larger table is there, the next mini table would start a next line. But unfortunately it is only the case on some desktop clients & webmails, but not all of them.
Can you think of a solution to make this responsive friendly ?
Thanks in advance !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="SayDating" content="True" />
<title>E-mail</title>
<style type="text/css">
.ReadMsgBody {width: 100%; background-color: #ffffff;}
.ExternalClass {width: 100%; background-color: #ffffff; }
body {width: 100%; background-color: #ffffff; margin:0; padding:0; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: none;}
html {width: 100%; }
table {border-spacing: 0px;}
p {margin-bottom: 0}
#media only screen and (max-width: 640px) {
body[class=responsive] .deviceWidth {width:440px!important}
body[class=responsive] .fichesannonces { width: 360px !important; }
body[class=responsive] .deviceWidth2 {width:420px!important}
}
#media only screen and (max-width: 479px) {
body[class=responsive] .deviceWidth {width:280px!important}
body[class=responsive] .fichesannonces { width: 240px !important; }
body[class=responsive] .deviceWidth2 {width:266px!important; padding: 0 0 3px 0!important;}
}
</style>
</head>
<body class="responsive">
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td style="padding: 10px 0;" valign="top" width="100%">
<table class="deviceWidth" width="580" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<table class="deviceWidth2" style="width: 100%;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td class="deviceWidth2" style="padding: 5px 15px 15px 15px; font-family: Tahoma, Geneva, Kalimati, sans-serif; font-size: 13px; color: #000000;" align="left">Bonjour,<br /><br />blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla blablablablabla :</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td align="center">
<table class="fichesannonces" width="480" style="font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="0" align="center">
<tbody>
<tr>
<td width="480">
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
Pseudopseudo<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform: capitalize;">ville</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
Pseudopseudo<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
<table style="width: 116px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="5" align="left">
<tr>
<td>
<table style="width: 106px; font-family: Verdana, Geneva, sans-serif; font-size: 12px; color: #000000; text-align: center;" border="0" cellspacing="0" cellpadding="3" align="left">
<tr>
<td style="border: 1px solid gray;">
<img src="http://www.carrevert.net/IMG/carre.gif" alt="Voir la photo" width="100" style="border: 0; margin: 0; font-size: 14px; display: block;" />
</td>
</tr>
<tr>
<td align="left" valign="top">
onononnonon...<br /><span style="font-size: 11px; color: #595959;">26 ans<br /><span style="text-transform : capitalize;">VILLE</span></span>
</td>
</tr>
<tr>
<td align="left">
Voir le profil
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>