I have an issue where there is a small 1px border on the right hand side of the nemo image in Outlook 2007, 2010 and 2013, as shown below...
However, this doesn't happen in any other email browser... Here is the HTML code I am using...
<div id="top" align="center" style="background:#fff400; background-color:#fff400;">
<table align="center" width="100%" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; width: 100%;" bgcolor="#FFFFFF" class="hide">
<tbody><tr>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;">
<table align="center" width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFFFFF" class="table">
<tbody><tr>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="1" width="20"></td>
<td width="600" colspan="3" align="left" valign="top" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:12px;">
Click here if you can't read this email
</td>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="1" width="20"></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td align="left" bgcolor="#ffffff" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
</tbody></table>
<table align="center" width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFF400" class="table">
<tbody><tr>
<td width="580" align="left" bgcolor="#fff400" style="font-family:Arial, Geneva, sans-serif; color:#000001; font-size:9px;"><img src="images/spacer.gif" alt="" width="1" height="15" style="display:block" border="0"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr style="font-size:12px; font-family: Arial, Geneva, sans-serif; color:#000000;" align="left" valign="top">
<td align="left" valign="top">
<table class="table">
<tbody>
<tr>
<td><img src="http://placekitten.com/172/115" width="172" height="115" alt="Alt Tag" style="display:block;" border="0" class="mob_img hide"></td>
<td><img src="http://placekitten.com/406/115" width="406" height="115" alt="The 10 Minute Shake Up" style="display:block;" border="0" class="mob_img"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" height="20" width="1"></td>
</tr>
<tr>
<td align="left" valign="top">
<table width="640" border="0" cellspacing="0" cellpadding="0" style="font-family:Arial; font-size:9.5px; color:#636363; " bgcolor="#FFFFFF" class="table300">
<tbody>
<tr>
<td colspan="3"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="20" height="1" style="display:block" border="0"></td>
<td align="right" valign="top">
<table align="left" width="270" border="0" cellspacing="0" cellpadding="0" class="mob_left table300">
<tbody><tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#00b3f0; font-size:24px; padding-top:10px;"><img src="http://placekitten.com/270/88" width="270" height="88" alt="" class="mob_img " style="display:block;" border="0"></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:20px; padding-top:10px;"><strong>Hello {Name},</strong></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="1" height="16" style="display:block" border="0"></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras pretium mi vel magna rhoncus, et pulvinar mauris varius. Nullam tincidunt, ipsum in eleifend tincidunt, tortor turpis viverra turpis, vehicula facilisis dui arcu quis sem. Aenean tincidunt diam orci, eget feugiat ante gravida eu. Fusce venenatis mollis nisi eget vulputate. Vestibulum ut turpis eget urna tincidunt volutpat sed at lorem. Donec non neque eget mauris gravida fringilla.</td>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="10" height="16" style="display:block" border="0"></td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:Arial, Geneva, sans-serif; color:#000000; font-size:15px;"><img src="http://design.datalateral.com\serco\73851\emails\emailOne\images/spacer.gif" alt="" width="1" height="16" style="display:block" border="0"></td>
</tr>
</tbody></table>
<table border="0" cellspacing="0" cellpadding="0" align="right" class="table" style="mso-table-rspace: 0pt; mso-table-lspace: 0pt;">
<tbody><tr>
<td align="right" valign="top"><span id="nemoswitch"><img src="http://design.datalateral.com\serco\73851\emails\emailOne/images/nemoDesktop_11.jpg" width="310" height="408" alt="Finding Nemo" id="nemo" class="mob_img" style="display:block;" border="0"></span></td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td colspan="3"><span id="nemobottomswitch"><img id="nemoBottom" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_16.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
</tr>
</tbody></table>
</td>
</tr>
</tbody>
</table>
</div>
Here is a link to the fiddle. Any ideas where I am going wrong?
Thanks.
You are using a background color in your table cell.
To fix, simply add the following to your embedded styles:
table td { border-collapse: collapse; }
Or you can add it inline:
<td style="border-collapse: collapse;">... </td>
Checkout this post
In your table(where you have a issue) you have used colspan="3". But your table only have two column. No idea why you have added colspan="3".
Change this
<td colspan="3"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
To
<td colspan="2"><span id="nemotopmobile"><img id="nemotop" src="http://design.datalateral.com\serco\73851\emails\emailOne\images/nemoDesktop_08.jpg" width="640" height="15" alt="" class="mob_img " style="display:block;" border="0"></span></td>
Do the same thing for the bottom row also.
Related
I have made an html template that works almost perfectly except images suddenly do not appear in outlook online.
The appear to be reduced to a 1px width and height.
I have set the widths in the inline styles, but not the heights as I would like the client to have the flexibility of an auto height. The problem also occurs even when I have set a width and height.
This works fine except for outlook and I cannot work out why.
here is the code from on of the sections, though this happens to every image in the template.
I have checked that images are not turned off in my email settings
<table width="650" style="table-layout:fixed;margin-left:auto;margin-right:auto;" border="0" align="center" cellpadding="0" cellspacing="0" class="wrapper" mc:repeatable mc:variant="half and half white">
<tr>
<td align="left">
<table width="650" class="wrapper" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#ffffff">
<tr>
<td align="left">
<table width="324" border="0" align="left" cellpadding="0" cellspacing="0" class="wrapper">
<tr>
<td class="pad_top_split" width="324" align="center" valign="top">
<img src="https://gallery.mailchimp.com/85d3e81373f3d7582fcc72bdb/images/ec03eb0f-61aa-4c51-8efd-621054f0652c.jpg" width="324" class="full_img" alt="Flush image 2" style="display:block; max-width:324px;" border="0" mc:edit="324_images2">
</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="286" border="0" align="right" cellpadding="0" cellspacing="0" class="wrapper" bgcolor="#ffffff">
<tr>
<td valign="top">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="pad_side">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="32" class="fix_height"> </td>
</tr>
<tr>
<td class="white" style="font-family:Arial, sans-serif;font-size:14px;letter-spacing:4px;line-height:34px;color:#000000;" mc:edit="text_2">Lorem ipsum text</td>
</tr>
<tr>
<td height="7" style="line-height:0px;font-size:0px;"> </td>
</tr>
<tr>
<td class="white" style="font-family:Arial, sans-serif;font-size:15px;background-color:#ffffff;line-height:25px;color:#000000;" mc:edit="para_2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae interdum ligula. Pellentesque feugiat ligula ligula, in interdum dolor aliquet et. </td>
</tr>
<tr>
<td height="32" class="fix_height"> </td>
</tr>
</table>
</td>
<td width="30" class="hide">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
I want to put hr between two elements in my table. I am creating mailing templemate. How can I put it in one row? Here's code:
body {
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
line-height: 100%;
}
#outlook a {
padding: 0;
}
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
border-collapse: collapse;
}
.tablereset {
margin: 0 auto;
width: 640px !important;
line-height: 100% !important
}
.button {
margin: 0 auto !important;
}
.devicewidthsocial {
margin: 0 auto;
}
img {
outline: none;
text-decoration: none;
border: none;
-ms-interpolation-mode: bicubic;
max-width: 100%!important;
margin: 0;
padding: 0;
display: block;
}
table td {
border-collapse: collapse;
}
table {
border-collapse: collapse;
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
td.boxesfont {
font-size: 17px !important;
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[class*=font-resize] {
font-size: 140%!important
}
td[style*="Roboto"] {
font-family: 'Roboto', Arial, Helvetica, sans-serif!important
}
td[style*="Open Sans"] {
font-family: 'Open Sans', arial, sans-serif !important
}
#media only screen and (max-width:640px) {
a[href="tel"],
a[href="sms"] {
text-decoration: none;
color: #ffffff;
pointer-events: none;
cursor: default;
}
tr.removemobile {
display: none;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=button] {
float: none;
}
table.removemobile {
display: none;
}
table.tablereset {
margin: 0 auto;
width: 440px !important;
line-height: 100% !important
}
table[class*=devicewidth] {
width: 440px!important;
text-align: center!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 400px!important;
text-align: center!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
img[class*=logoImg] {
width: 110px!important;
height: auto!important;
}
}
#media only screen and (max-width:479px) {
table.removemobile {
display: none;
}
table[class*=tablereset] {
margin: 0 auto;
width: 280px !important;
line-height: 100% !important
}
img[class*=logoImg] {
width: 100px!important;
height: auto!important;
}
td[class*=threecolumnphoto] {
padding-bottom: 20px;
}
table[class*=devicewidthright] {
width: 160px!important;
}
table[class*=devicewidth] {
width: 280px!important;
float: none!important;
display: table!important;
}
table[class*=devicewidthinner] {
width: 240px!important;
float: none!important;
}
table[class*=devicewidthinner3] {
width: 173px!important;
float: none!important;
}
table[class*=button] {
float: none!important;
}
table[class*=button] td,
table[class*=button] td a {
font-size: 12px!important;
}
td[class*=oswaldfont] {
font-size: large!important;
}
}
<body style="margin:0; padding:0">
<div>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</table>
</td>
</tr>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td align="left" width="10">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="10">
<tr>
<td width="10" height="26">
<hr style="
border:none;border-left:1px solid hsla(200, 10%, 50%,100);height:20px;width:1px;
">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="devicewidthinner" align="right" border="0" cellpadding="0" cellspacing="0" width="300">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tr>
<td align="center" width="1280">
Zobacz
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
Sample Fiddle..
There are too many extra tables used in your code, although i have updated your code. Please check the updated snippet. Hope it is helpful to you.
<body style="margin:0; padding:0">
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="58" width="640"> </td>
</tr>
<tr>
<td>
<p style="text-align: center">xyz</p>
</td>
</tr>
<tr>
<td align="center" style="font-size:1px; line-height:1px" height="18" width="640"> </td>
</tr>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="350">
<tbody>
<tr>
<td style="font-family:Arial,Helvetica,sans-serif;font-size:18px; color:#b2b2b2;line-height: 18px;text-align: center;">
Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="40" width="640"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<!-- pierwsza dwójka -->
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="640">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="left" width="317">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 20px;line-height:24px; color: #606060; font-weight: bold; text-transform: uppercase;">lorem ipsum </td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300; color: #606060;">Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis.</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="25"> </td>
</tr>
</tbody>
</table>
</td>
<td align="left" width="1" valign="middle">
<span style="width:1px; height:20px; background:#000; display:block;"></span>
</td>
<td width="317" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="317">
<tbody>
<tr>
<td align="left" width="640">
<table style="mso-table-lspace:0;mso-table-rspace:0;border-collapse: collapse;" class="devicewidthinner" align="center" border="0" cellpadding="0" cellspacing="0" width="270">
<tbody>
<tr>
<td width="640" height="26"> </td>
</tr>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">lorem ipsum
<span style="color: red;text-decoration: line-through;">
<span style="color: #606060; font-weight: bold; font-size: 18px;">
100
</span>
</span>
</td>
</tr>
<tr>
<td width="640" align="left" style="font-family: Arial, Helvetica, sans-serif;font-weight: 300; font-size: 14px;line-height:24px;"><span style="font-weight: bold;">lorem ipsum </span><span style="color: #e4001b; font-weight: bold; font-size: 18px;">lorem ipsum</span></td>
</tr>
<tr>
<td align="left">
<table style="mso-table-lspace:0;mso-table-rspace:0;" align="left" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="640" align="left" class="robotofont" style="font-family: Arial, Helvetica, sans-serif,Roboto;font-weight: 300;">
<p>lorem ipsum:</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span> lorem ipsum</p>
<p><span>lorem ipsum: </span>lorem ipsum</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td width="640" height="10"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<table class="tablereset" align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td width="1280">
<table class="devicewidth" align="center" cellspacing="0" cellpadding="0" border="0" width="640" style="margin:0 auto;">
<tbody>
<tr>
<td width="640" align="center">
<table class="devicewidthinner" align="left" border="0" cellpadding="0" cellspacing="0" width="640">
<tbody>
<tr>
<td align="center" width="1280">
Zobacz
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
A line created with <hr> is (always) horizontal.
BUT, you can simply add a right border at the left column or a left border at the right column of the table.
Your css could look like this:
table tr td:first-child {
border-right: 1px solid #000000;
}
So every first cell in a row, gets a right border. To ensure you don't have gaps between rows you may also want to add the following attributes to your table:
table {
border-collapse: collapse;
border-spacing: 0;
}
Iam tying to create an newsletter, but in outlook mobile it does not pick up the correct styling. The styling which is not picked up is as follow: bold text, color of text and uppercase
Here a link to the output
The titles like Folio .... needs to be blue and bold.
thereby the text in buttons needs to be white and bold.
And the text in de full width button has to be uppercased and white
here is the html of an element with the image left text right:
<!-- // Begin Module: [Dark] Image left text right \\ -->
<table class="responsive-table" width="650" bgcolor="#d1d6e1" border="0" cellpadding="0" cellspacing="0" align="top" mc:repeatable="trading" mc:variant="[Dark] Image left text right">
<tbody>
<tr>
<td width="5%"></td>
<td width="90%" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr><td width="650" height="30"></td></tr>
<tr>
<td width="35%" align="center" valign="top" class="mobile-width-100" mc:label="image" mc:edit="iltrdimage">
<a href="#" target="_blank">
<img src="http://placehold.it/800x538" width="230" style="text-decoration: none;">
</a>
</td>
<td width="5%" class="mobile-height-30"></td>
<td width="60%" align="left" valign="top">
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-bottom: 5px;" mc:label="body title" md:hideable="" mc:edit="iltrdbodytitle">
<a href="#" class="block-title" style="font-family: 'OpenSans', Arial; font-size: 16px !important;line-height: 18px;color: #224691; text-decoration: none; font-weight: 700;" mc:label="heading">
<font color="#224691">Title</font>
</a>
</td>
</tr>
<tr>
<td style="padding-bottom: 10px;" mc:label="body text" mc:edit="iltrdbodytext">
<span style="font-family: 'OpenSans', Arial; color: #323232;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pharetra hendrerit felis, eget auctor ex tincidunt eget. Vestibulum consequat quam nibh.
</span></td>
</tr>
</table>
<table bgcolor="#2f57ad" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td align="center" class="btn">
<table cellpadding="0" cellspacing="0">
<tr>
<td mc:label="button" mc:edit="iltrdbutton">
<font color="#ffffff">Read more</font>
</td>
<td style="padding-left: 10px; padding-top: 1px;"><span style="font-size: 13px; color: #fff;">▸</span></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr><td width="650" height="30"></td></tr>
</tbody>
</table>
</td>
<td width="5%"></td>
</tr>
</tbody>
</table>
<!-- // End Module: [Dark] Image left text right \\ -->
outlook does not support all css please go have a look at https://www.campaignmonitor.com/css/
outlook versions just as ie have different css to consider so you would need something like this to cater for all the options
<!--[if gte mso 9]>
<style type="text/css">
/* Your Outlook-specific CSS goes here. */
</style>
<![endif]-->
I am trying to build a two column layout for a newsletter, but for some reason my columns are sometimes vertically aligning to the centre?
In some versions of outlook it works but others not?
Any idea how I can fix this?
<!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="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="telephone=no" name="format-detection" />
<title>EMAIL NEWSLETTER</title>
<style type="text/css">
body {
-webkit-text-size-adjust: 100%!important;
-ms-text-size-adjust: 100%!important;
-webkit-font-smoothing: antialiased!important
}
img {
border: 0!important;
outline: none!important;
}
p {
margin: 0!important;
padding: 0!important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_white_und a {
text-decoration: underline;
color: #ffffff;
}
.em_orange a {
text-decoration: none;
color: #EC8026;
}
.em_orange1 a {
text-decoration: none;
color: #e44c16;
}
.em_marun a {
text-decoration: none;
color: #1e8faa;
}
.em_marun1 a {
text-decoration: none;
color: #1E8FAA;
}
.em_yellow a {
text-decoration: none;
color: #f5ebd7;
}
#media screen and (min-width:601px) {
.container {
width: 600px!important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">table{border-collapse:collapse!important!important}</style>
<![endif]-->
</head>
<body style="margin:0;padding:0">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#1E8FAA">
<tr>
<td bgcolor="#1E8FAA" valign="top" style="border-spacing:0;Margin:0 auto;width:100%;max-width:582px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><!--[if (gte mso 9)|(IE)]><table width="582" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width:582px" align="center">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="line-height:0px;font-size:0px"> </td>
</tr>
<tr>
<td class="two-column" valign="top" style="text-align:left;font-size:0" dir="rtl"><!--[if (gte mso 9)|(IE)]><table width="100%" dir="rtl"><tr><td width="188"><![endif]-->
<div class="column" style="width:100%;max-width:188px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td valign="top" class="em_hide"><table width="100%" border="0" cellspacing="0" style="max-width:198px;" cellpadding="0" align="right" class="column">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><table style="max-width:198px;" border="0" cellspacing="0" cellpadding="0" align="left" class="column">
<tr>
<td width="10"> </td>
<td mc:edit="text_2" class="em_center" height="42" valign="middle" align="left" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><span class="em_white">Email not displaying properly? </span></multiline>
<br />
<span class="em_white_und">
<webversion style="text-decoration:underline;color:#ffffff;"><span class="em_white_und" style="text-decoration:underline;color:#ffffff;">View it in your browser.</span></webversion>
</span></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="384"><![endif]-->
<div class="column" style="width:100%;max-width:384px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" style="max-width:384px" cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" class="em_hide"> </td>
<td width="152" align="center" valign="top"><img editable="true" src="/images/logo.jpg" width="152" alt="logo" style="display:block;font-family:Georgia, 'Times New Roman', Times, serif;font-size:14px;color:#ffffff;font-weight:bold;line-height:20px;max-width:152px;" border="0" /></td>
<td width="222" class="em_hide"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top"><repeater>
<layout label="Gallery">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ffffff">
<tr>
<td width="5" class="em_hide"> </td>
<td class="two-column" valign="top" style="text-align:center;font-size:0"><!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 1" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 2" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</layout>
</repeater></td>
</tr>
</table>
</body>
</html>
By setting a height for the element your trying to valign it should work.
I fixed it with:
<!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295" valign="top"><![endif]-->
How can I align these tables to centered when it hits mobile?
I need to do this without media queries to support the Gmail mobile app.
The HTML code is from an actionrocket codepen, but i don't know what will make the tables centered on mobile with breaking the desktop view
http://codepen.io/actionrocket/pen/EoCLH
<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#ededed">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center" style=" display:block; max-width:640px !important;" bgcolor="#ffffff">
<tr>
<td>
<table id="holder" class="wrapper" border="0" cellspacing="0" cellpadding="0" style="width:100%; max-width:640px !important;" align="center">
<tr><td align="center">
<!--[if mso]>
<table id="outlookholder" border="0" cellspacing="0" cellpadding="0" align="center"><tr><td>
<![endif]-->
<!--[if (IE)]>
<table border="0" cellspacing="0" cellpadding="0" width="640" align="center"><tr><td>
<![endif]-->
<!--2 column-->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table width="320" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
<!--[if mso]></td><td><![endif]-->
<table width="320" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td width="20"></td>
<td width="280" bgcolor="#ededed">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><img style="display:block" border="0" src="http://placehold.it/100x100" width="100" height="100" alt=""/></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:22px; line-height:26px; color:#454545; text-align:center;">Module title goes here</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="2%"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:14px; line-height:20px; color:#454545; text-align:center;">Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</td>
<td width="2%"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">
<table width="160" border="0" cellspacing="0" cellpadding="0" class="w300" bgcolor="#a3a3a3">
<tr>
<td width="15"></td>
<td style="font-family:arial, Helvetica, sans-serif; font-size:16px; line-height:20px; color:#ffffff; text-align:center;">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
<a style="color:#FFFFFF; text-decoration:none;" href="#" target="_blank">Call to Action</a>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="10"></td>
</tr>
</table>
</td>
<td width="15"></td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%" height="20"></td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
</table>
</td></tr></table>
<!--[if mso]>
</td></tr></table>
<![endif]-->
<!--[if IE]>
</td></tr></table>
<![endif]-->
</td></tr></table>
</td></tr></table>
You'll struggle to do this for Gmail. Because the containing tables for each column are aligned left you cannot override them to certain. Your best alternative is to force the desktop view for Gmail users or creating the email with Gmail & Outlook in mind and then use CSS with media queries to allow for iOS users.
Modules with new design
Don't use tables for design
I do not think you should use tables for design, see Why not use tables for layout in HTML? If you are going to use tables, you should use the CSS properties, such as:
display: table;
display: table-cell;
display: table-column;
display: table-column-group;
display: table-footer-group;
display: table-header-group;
display: table-row;
display: table-row-group;
MDN css display
Don't use inline styles
Also I see you are using inline CSS styling. See What's so bad about in-line CSS? Simply, maintaining your code gets really hard and frustrating.
Module solution
I used css-stylesheets (handy thing). In my opinion I have not used any hard to understand css-properties. Positioning is done with text-align center. (inline elements get position centered). Added padding and margin to make thins have a little more space. Used box-sizing: border-box; to maintain size even if I add padding.
width 100px + padding-top: 20px would normally be a size of 120px; with box-sizing you maintain the 100px.
How is this even mobile friendly?
Ah, glad you asked. I use an inline-block element on the module wrapper.
Actually I called the section class for .module. With the inline-block display property the elements wrap. So if there is a lot of width on the page the modules will be displayed next to one another. If there is little they will be displayed under one another.
.module {
display: inline-block;
background-color: #ddd;
width: 300px;
height: 300px;
padding-top: 30px;
box-sizing: border-box;
font-family: arial;
text-align: center;
margin: 5px;
}
.module img {
display: block;
margin: 0 auto;
width: 100px;
}
.module h1 {
font-weight: normal;
}
.invers {
border: none;
background-color: #aaa;
padding: 10px 20px;
font-size: 1em;
color: white;
cursor: pointer;
}
<div class="wrapper">
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<br>
<h1>HERE is what happens if the screen gets small:</h1>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
<br>
<section class="module">
<img src="http://lorempixel.com/image_output/animals-q-g-100-100-7.jpg" />
<h1>Module title goes here</h1>
<p>Praesent laoreet sem orci. Maecenas male neq nec sem gravida commodo.</p>
<button class="invers">Call to Action</button>
</section>
</div>