Yes, almost everyone hates creating emails in Outlook (Android is almost as bad with Gmail and such). But, most of us are whingeing about getting rid of borders and I am whingeing about a border that does not want to work in Outlook '07, '10 & '13 (the usual suspects). Here is the code. It works everywhere...perfectly. Beautifully. Exquisitely. I have seen no one deal with a missing border. Can you help me, please...Godfather?
<table bgcolor="#ffffff" width="594" border="3" align="center" cellpadding="0" cellspacing="0" style="box-sizing: border-box; border: #b29d6c 3px solid;" class="deviceWidth">
Without knowing the entirety of your code, I cannot give you any other suggestions but will provide some proof that the code I am providing (see below) should work for the Outlook version that you are experiencing issues with.
Outlook 2007
http://i.imgur.com/tbVafPl.png
Outlook 2011
http://i.imgur.com/W1tvXSk.png
Outlook 2013
http://i.imgur.com/PvLAj3T.png
I have tested the code that you have provide. Here is a sample code that I put together that include your code at the very top. Notice that in all of the screen grabs above, setting your border properties does in fact work. There could be other issues within the entirety of your HTML.
Sample Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!--<![endif]-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0" style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;">
<div style="margin: 0px;outline: none;padding: 0px;width: 100%;background-color: #EFEFEF;background: #EFEFEF;font-family:arial,sans;font-size:15px;color:#555555;text-align: center;">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center" valign="top" width="100%" style="font-family:arial,sans;font-size:15px;color:#555555;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="650" valign="top" align="left" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:left;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#ffffff" border="3" style="border: #b29d6c 3px solid;min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="650" valign="top" align="center" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
This example sets the border styling on the table tag, not the table cell
</td>
</tr>
</table>
<br><br><br><br>
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#FFFFFF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="650" valign="top" align="center" style="border: #b29d6c 3px solid;padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
Has the CSS border properties set on the table cell
</td>
</tr>
</table>
<br><br><br><br>
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#FFFFFF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="100%" valign="top" align="center" style="background-color:#b29d6c;padding:3px;">
<table border="0" cellpadding="0" cellspacing="0" width="650" bgcolor="#EFEFEF" style="min-width: 650px;font-family:arial,sans;font-size:15px;color:#555555;">
<tr>
<td width="100%" valign="top" align="center" style="padding:50px;background-color: #ffffff;font-family:arial,sans;font-size:15px;color:#555555;text-align:center;line-height:150px;line-height:1.5;mso-table-lspace:0pt;mso-table-rspace:0pt;">
This technique uses an outter table with the background color of the border and a padding set to 3 pixel to mimic the borders around the text block.
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
Related
Since using background images in an HTML mail for outlook 2007-2016 is not supported by CSS I tried this workound with VML:
This is my DOM before using VML:
<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" bgcolor="#F4C046"
style="background-image: url('../image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color:#F4C046;border:solid">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--- some content -->
</table>
</td>
</tr>
</table>
Now this works for most email clients, but in outlook 2007-2016 the background-image is ignored and in renders without the background color like this:
When I try to use the "VML" solution my code looks like this:
<table width="100%" align="center" height="227" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td align="center" bgcolor="#F4C046"
style="background-image: url('../image.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-color:#F4C046;border:solid">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;">
<v:fill type="frame" src="../myimg.jpg" color="#F4C046" />
<v:textbox style="mso-fit-shape-to-text:true" inset="0,0,0,0">
<![endif]-->
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--- some content -->
</table>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
Now the background is working, hover the table thats on the background is not centered anymore:
Also if I make the outlook window small a gap appears:
I could wrap my table that should be centered one more time with a full with table like this:
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<table width="600" border="0" cellpadding="0" cellspacing="0">
<!--- some content -->
</table>
</td>
</tr>
</table>
to fix the centering:
However the gap still appears:
Any idea how to properly use background image and center the content, without the gap issue?
Not sure whats wrong with your code, but maybe you can use this I found in an old email I made. It works with outlook 2010,13,16. I hope it helps you.
NB: Dont mind all the classes :)
<table bgcolor="#efefef" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<tr>
<td align="center">
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
class="w394 w355-413 w300-374" width="640">
<tbody>
<tr>
<td align="left" background="https://placeimg.com/640/540/arch" bgcolor="#efefef"
class="w394 w355-413 w300-374 break h400" height="540"
style="background-size:640px 960px;repeat:no-repeat;" width="640">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:640px;height:540px;">
<v:fill type="tile" src="https://placeimg.com/640/540/arch" color="#efefef" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table>
<table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0"
class="w280 w240-413" valign="middle" width="320">
<tbody>
<tr>
<td align="center" class="f28"
style="padding:20px;font-size:36px;line-height:40px;font-family: Arial;font-weight: 400;color:#be1f24;"
valign="top">Lorem <b>IPSUM</b> dolor <b>sit </b>amet</td>
</tr>
</tbody>
</table>
<table align="center" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="50"> </td>
</tr>
</tbody>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
We are trying to make this work in outlook as well, but the solutions I've found online aren't working. The email in outlook has a width about 1500px.
Does anyone know a solution?
The code is generated in Aweber. We tried many things, but nothing seems to affect the looks in outlook. :(
<!-- LOGO -->
<div style="max-width:680px;margin:auto;" class="email-container">
<!--[if mso]>
<table style=”word-break: break-all;” cellspacing="0" cellpadding="0" border="0" width="680" align="center">
<tr>
<td>
<![endif]-->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
<tbody><tr>
<td style="padding:30px 0;text-align:center;" class=""><aw:header></td>
</tr>
</tbody></table>
<!-- BODY -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;border-radius:3px;overflow:hidden">
<tbody>
<!-- 1 Column Text + Button -->
<tr>
<td bgcolor="#ffffff">
<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tbody><tr>
<td mc:edit="lead_copy" style="padding:40px;font-family:sans-serif;font-size:14px;line-height:22px;color:#555555;" class=""><aw:body></td>
</tr>
</tbody></table>
</td>
</tr>
<!-- Clear Spacer -->
<tr>
<td height="40" style="font-size:0;line-height:0;" class="">
</td>
</tr>
<!-- 3 Cols -->
<!-- Clear Spacer -->
<!-- Minuscule -->
</tbody></table>
<!-- Email Footer -->
<table cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width:680px;">
<tbody><tr>
<td style="padding:40px 10px;width:100%;font-size:12px;font-family:sans-serif;line-height:18px;text-align:center;color:#888888;" class="x-gmail-data-detectors"><aw:footer></td></tr>
</tbody></table>
<!--[if mso]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
Outlook doesn't read the max-width value at all. If you use the max-width in combination with width:100%, that will help. Alternatively, you can use some conditional statements that will help you out with the width handling on different clients. I asked a member of AWeber's template team for you and they suggested these two:
<!--[if !mso]><!--><table cellpadding="0" cellspacing="0" style="max-width:600px!important; width:100%;"><![endif]-->
<!--[if gte mso 9]><table cellpadding="0" cellspacing="0" width="600"><![endif]-->
Having the conditionals will let the width be 100% on mobile devices, which I assume you also want, but be 600 elsewhere.
I a making an HTML email, and I have most of the elements appear as they should. But for some reason, one element I am trying to insert, a small box with an address and a contact doesn't show up like it should.
That grey bar at the bottom with the address should appear the same width as the main white box, and should be surrounded by blue.
My code is:
<!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" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor= "#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor= "#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete-->     <!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
However the address bar does appear to format correctly if i move it above the green and orange boxes,
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor= "#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum<!--do not delete-->     <!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor= "#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr bgcolor="EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
<tr>
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center" >
<!--this contains unsub link and copyright-->
<td bgcolor="50B54D" width="60%">
unsub link
</td>
<td bgcolor="EC552B" width="40%">
social media links
</td>
</tr>
</table>
</tr>
</table>
I'm not sure why this is happening, how do I change the code so that the address appears below the green and orange boxes, but stays the same width as the rest of the elements above it?
Move address row to the unsub link/social media links table and make its colspan="2". I hope this is what you are asking for
<!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" />
<title>BigParser</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body style="margin: 0; padding: 0;">
<table border="1" cellpadding="0" cellspacing="0" width="100%">
<!--main background color, size, etc.-->
<tr bgcolor="#21A1EC">
<td align="center" style="padding: 40px 0 30px 0;">
<!--this BigParser logo at the top-->
<img src="bigparser.gif" width="186" height="43" style="display:block;" />
</td>
</tr>
<tr bgcolor="#21A1EC">
<td align="center">
<table border="1" cellpadding="0" cellspacing="0" width="600">
<!--creates main padded content table-->
<tr width=100% bgcolor="#ffffff">
<td align="center" style="padding-left: 35px; padding-bottom: 40px; padding-top: 40px; font-size: 30px;">
<!--title formatting-->
Lorem ipsum
<!--do not delete-->    
<!-- centering title fix-->
</td>
</tr>
<tr width="100%" bgcolor="#ffffff">
<td align="justify" style="padding-left: 35px; padding-bottom: 20; padding-right: 35; font-size: 23px;">
<!--content formatting-->
content text
</td>
</tr>
<tr>
<td align="left" valign="top">
<!--this is the unsub/links box, contains the unsubscribe and links to social media-->
<table align="center" border="1" cellpadding="0" cellspacing="0" width="600">
<tr align="center">
<!--this contains unsub link and copyright-->
<td bgcolor="#50B54D" width="60%">
unsub link
</td>
<td bgcolor="#EC552B" width="40%">
social media links
</td>
</tr>
<tr bgcolor="#EEEFF1" align="left" style="font-size:15;">
<td style="padding-left:10px; padding-top: 5px; padding-bottom: 5px;" colspan="2">
BigParser | 12020 Sunrise Valley Dr, Sute 101 Reston VA 20191
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
I am working on an email template so my options are limited to tables.
I need a way to achieve the following using tables
All content is generated dynamically via RSS feed so I cannot use images.
Here's what I have so far
<table width="100%" bgcolor="#ffffff" cellpadding="0" cellspacing="0" border="0" st-sortable="banner"><tbody><tr>
<td>
<table width="600" cellpadding="0" cellspacing="0" border="0" align="center" class="devicewidth"><tbody><tr>
<td width="100%">
<table width="600" align="center" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
<!-- start of image --><td align="center"> *|FEEDBLOCK:http://domain.com/feed/|* *|FEEDITEMS:[$count=1]|*
<a target="_blank" href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a>
</td>
</tr></tbody></table>
<!-- end of image -->
</td>
</tr>
<tr>
<td width="100%">
<table width="150" align="left" bgcolor="#ff4800" cellspacing="0" cellpadding="0" border="0" class="devicewidth"><tbody><tr>
<!-- start of title --><td align="left">*|FEEDITEM:TITLE|*</td>
</tr>
<tr>
<!-- start of content -->
<td align="left" bgcolor="#ffffff">*|FEEDITEM:CONTENT|* </td>
</tr>
</tbody></table>
<!-- end of title -->
</td>
</tr>
<!-- Spacing -->
<tr><td height="10" style="font-size:1px; line-height:1px; mso-line-height-rule: exactly;"></td></tr>
<!-- Spacing -->
</tbody></table>
</td>
</tr></tbody></table>
Yes you can always do that. I have tried to get some similar kind of layout with respect to the screen-shot in your post.
You may check this code
<html>
<head>
<title>My Layout</title>
<style type="text/css">
table{
border:1px solid #c4c4c4;
}
td{
border:1px solid #c4c4c4;
}
#table1{
width: 800px;
}
.table1-td-left{
height:400px;
width:200px;
background-color: green;
}
.table1-td-right{
width:600px;
background-color: yellow;
}
.table2-td-left{
background-color: red;
width: 200px;
}
.table2-td-right{
background-color: blue;
width: 300px;
}
</style>
</head>
<body>
<table id="table1">
<tr>
<td class="table1-td-left">LHS</td>
<td class="table1-td-right">
<table id="table2">
<tr>
<td class="table2-td-left">Content # 1</td>
<td class="table2-td-right">Content # 2</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
You may also see this Fiddle Demo.
Basically you need to table within td.
This can be achieved, however, know that background images are not supported in Outlook 2003, 2007, and 2013. If you are not looking to support those email clients here is how you can achieve this. Disclaimer: this should be tested in Litmus or Email on Acid to verify the email clients you wish to support are producing the results you intended.
<table width="620" height="400" cellspacing="0" cellpadding="0" border="0" background="http://ingridwu.dmmdmcfatter.com/wp-content/uploads/2015/01/placeholder.png">
<tbody>
<tr>
<td align="left" valign="top" style="padding-top: 75px;">
<table width="200" bgcolor="#dddddd" cellpadding="0" cellspacing="0" border="0">
<tbody>
<tr>
<td><h2>Title</h2></td>
</tr>
<tr>
<td><p>Some text</p></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
You can also view it here: http://jsfiddle.net/fcpz1um2/
using the backgrounds.cm method, you can do something like below sample and it should work in about 99% of email clients. It will need media queries and such to make it responsive, but should render consistently - even in ALL Outlooks.
<table width="620">
<tr>
<td background="http://i.stack.imgur.com/dDVdU.png" bgcolor="#EFEFEF" width="100%" height="300" valign="top" style="-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position:center; background-image:url(http://i.stack.imgur.com/dDVdU.png); background repeat: no-repeat;">
<!--[if gte mso 9]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" fill="true" stroke="false" style="width:660px;height:250px;">
<v:fill type="frame" src="http://i.stack.imgur.com/dDVdU.png" />
<v:textbox inset="0,0,0,0">
<![endif]-->
<div style="text-align:left;">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td height="34" style="font-size:1px; mso-line-height-rule:exactly; line-height:1px;"> </td>
</tr>
</table>
<table align="left" width="230" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
<tr>
<td style="padding-left:5px;">
<table align="left" bgcolor="red" width="100%" cellpadding="0" cellspacing="0" border="0" style="vertical-align:bottom; max-width:430px;">
<tr>
<td style="color:#FFFFFF; font-size:67px; line-height:80px; padding:5px;">30% <span style="font-size:40px;">Off</span></td>
</tr>
<tr>
<td bgcolor="#000000" style="color:#FFFFFF; padding:5px;">HURRY UP! GRAB YOUR BITE</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<!--[if gte mso 9]>
</v:textbox>
</v:rect>
<![endif]-->
</td>
</tr>
</table>
i have 6 social media icons for a footer of an e-mail. Is it possible to make this responsive for phones so the social media icons go from 6 to 3 in one row?
I have tried to use both divs and tables with bootstrap but both are displaying incorrectly. I would prefer tables as they work with outlook e-mail.
Bootstrap code:
<td class="col-xs-4 col-sm-4 col-md-2">
You can put each set of 3 icons into separate columns which stack on xs.
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
<div class="col-xs-12 col-md-6>...Three icons go here....</div>
Edit: Since this is for Outlook, Bootstrap will not play nicely with it. More info can be found here: Has anyone gotten HTML emails working with Twitter Bootstrap?
Would something like this work for you?
As an exmaple; this uses a media query, so that when the device width is below a certain size it resizes any 640px widths to 320px and then applies the "wrap" (wr) and "float" (fl) classes to wrap the columns beneath eachother.
If you take the HTML and stick it in Chrome of Firefox and resize the window you can see how it works.
<!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" />
<title>none</title>
<style type="text/css">
#media only screen and (max-width: 580px){
*[class].wr{ display:block !important; }
*[class].fl{ float:left !important; }
*[class].w320{ width:320px !important; }
</style>
</head>
<body style="padding:0px; margin:0PX;" bgcolor="#DEDEDE">
<table width="100%" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#DEDEDE" style="table-layout:fixed; margin:0 auto;">
<tr>
<td width="100%" align="center" valign="top" bgcolor="#DEDEDE">
<!--Table to wrap email-->
<!--Table with images in-->
<table width="640" border="0" cellpadding="0" cellspacing="0" class="w320">
<tr class="wr">
<!--Top row-->
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ffcc00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ccff00"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#00ffcc"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End top row-->
<!--Bottom row-->
<td class="fl wr">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#3377ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#ff3377"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
<td align="center" style="line-height:1px; font-size:1px;" bgcolor="#7733ff"><img src="images/image.gif" style="display:block;" width="30" height="30" border="0" alt=""/></td>
</tr>
</table>
</td>
<!--End bottom row-->
</tr>
</table>
<!--End table with images in-->
<!--End of table to wrap email-->
</td>
</tr>
</table>
</body>
</html>
Note: This works across iPhone, Android 2.3 and 4.2. Problems occur in Android 4.4 kitkat but there is a workaround for it.
The way to do it so it works everywhere (outlook and all android included is with floated tables:
CSS:
#media only screen and (max-width: 480px) {
*[class*="drop"] { float:none!important; clear:both!important; width:100%!important; padding:0!important; display:block!important; }
}
HTML:
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="left">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
<!--[if mso]></td>
<td align="left" valign="top" width="50%"><![endif]-->
<table width="300" border="0" cellpadding="0" cellspacing="0" class="drop" align="right">
<tr>
<td align="left" valign="top"><!--image 1 goes in here--></td>
<td align="left" valign="top"><!--image 2 goes in here--></td>
<td align="left" valign="top"><!--image 3 goes in here--></td>
</tr>
</table>
</td>
The table widths would need to be changed to suit your email width so they equal 50% of it.
You will notice the commented closing and opening td in the middle - this is an outlook condition, so for outlook only there will be a td wrapping each table.
If your tables don't need to be exactly 50% (as in there is padding between them) then you can leave out the outlook comment and just size your tables smaller than 50%, and make sure 1 is floted left and the other is floated right, leaving the gap between them that you need as padding. So long as this gap is more than about 10px, it should work in outlook.
Also be aware of your table structure when you use this outlook comment. If this is used in a table with more rows, you will get column span issues in outlook, as this row with have an extra column in outlook. Best to nest a fresh table inside a td before using this outlook fix.
Also note that the float is specified on the tables using the align attribute. This is to accommodate the older versions of outlook that don't recognize the css property float.