TC0
Nested Tables for Responsive Emails in Outlook
Hi I am working on an email and am having a few issues with tables.
The client insist the email is responsive and I am having to rebuild something that was sent to me but the code contained a lot of things our broadcast system wouldn’t accept. I am just starting out with responsive emails and am finding a few hurdles I need to pass.
The main 2 problems are:
The top logo section should be 2 tables sat next to each other, 10% and 80% then when shown on mobile they stack to 100%, this works great in everything bar outlook 2010 and 2013. It ignores all the margin info around the logo and does not place the tables next to each other, more stacked but the bottom still to the right of the top.
Second is the buttons, they are tables with links on the text in them, this is how they want them but I can’t get them to go to the right size in Outlook 2010 and 2013. I want all 3 200px wide and 20px margin between. I can get it to work in everything else but in outlook it needs more space so stacks them, the width now has to be 192 on each for outlook but it looks bad on everything else as they now have gap to the right. I also cant canter them which would look better but no matter what I try it won’t work.
Any help would be much appreciated.
Heres my code, pleas be kind if its bad as Im quite new to this
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Letter to ordinary and preference shareholders</title>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Pacifico);
body {
margin: 0;
padding: 0;
}
@media only screen and (max-width: 660px) {
table.container {
width: 480px !important;
}
td.photo img {
display: none;
}
td.photo {
width: 480px;
height: 175px;
background: url(http://www-uk.computershare.com/WebContent/doc.aspx?docid={ad533c90-ff20-4590-a822-916e27f306b2}&source=image) no-repeat 0px 0px;
}
table.buttonleft {
width: 153px !important;
}
table.button{
width: 153px !important;
}
table.buttonright {
width: 153px !important;
}
td.button {
width: 127px !important;
}
p.button1 {
margin: 1 30 1 0 !important;
font-size: 12px !important;
}
p.button2 {
margin: 1 0 1 0 !important;
font-size: 12px !important;
}
p.button3 {
margin: 1 0 1 0 !important;
font-size: 12px !important;
}
@media only screen and (max-width: 510px) {
table.container {
width: 100% !important;
}
table.buttonleft {
width: 100% !important;
margin-right: 0px !important;
margin-bottom: 10px !important;
}
table.button{
width: 100% !important;
}
table.logo{
width: 100% !important;
}
img.logo {
margin-top: 10px !important;
margin-bottom: 0px !important;
margin-left: auto !important;
margin-right: auto !important;
}
p.logohead {
text-align: center !important;
margin: 0 0 0 0; !important;
}
P.logotext {
text-align: center !important;
margin: 10 0 0 0 !important;
}
table.buttonright {
width: 100% !important;
margin-left: 0px !important;
margin-top: 10px !important;
}
td.content {
padding-left: 15px !important;
padding-right: 15px !important;
line-height: 20px !important;
padding-bottom: 10px !important;
}
td.photo {
height: 175px;
background: url(http://www-uk.computershare.com/WebContent/doc.aspx?docid={04bb7a82-38a0-4df4-9381-b6fef848f1f5}&source=image) no-repeat right 0px;
}
td.button {
width: 100% !important;
}
p.button1 {
margin: 1 0 1 0 !important;
font-size: 14px !important;
}
p.button2 {
margin: 1 0 1 0 !important;
font-size: 14px !important;
}
p.button3 {
margin: 1 0 1 0 !important;
font-size: 14px !important;
}
</style>
</head>
<body>
<div style="font-size: 1px; colour:#efe1b0; display: none;"> BP p.l.c Annual General Meeting. Letter to ordinary and preference shareholders. </div>
<!-- HEAD
-->
<table width="101%" border="0" cellspacing="0" cellpadding="0" style="border-bottom: 1px #f2f2f2 solid; background-color: #FFFFFF;">
<tr>
<td>
<table class="container" width="620" align="center" border="0">
<tr>
<td valign="top" class="content" style="padding: 5px 0px 5px 0px; font-family: Arial, Helvetica, sans-serif; font-size: 10px; line-height:22px; color: rgb(160, 160, 160);">
<p align="right"><a style="color: rgb(160, 160, 160); text-decoration: none;" href="#" target="_blank">Send to a friend</a> | <a style="color: rgb(160, 160, 160); text-decoration: none;" href="http://comms.bp.com/t/1PGC-3YA77-14A1BC5P8C/cr.aspx" target="_blank">View in browser</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- LOGO
-->
<table width="101%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="container" width="620" cellspacing="0" cellpadding="0" border="0" align="center">
<tr>
<td>
<table class="logo" width="20%" cellspacing="0" cellpadding="0" border="0" align="left" style="vertical-align: top;">
<tr>
<td>
<img width="55" height="72"
class="logo" style="height: auto; display: block; margin: 25px 0px 25px 20px;"
alt="BP" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={49feef32-74af-436a-8e29-3250dc00a663}&source=image">
</td>
</tr>
</table>
<table class="logo" width="80%" cellspacing="0" cellpadding="0" border="0" align="left">
<tr>
<td class="content" style="font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt;">
<p class="logohead" style="font-size: 24px; color: rgb(0, 130, 0); text-align: right; margin: 20 0 0 0;">BP p.l.c Annual General Meeting</p>
<p class="logotext" style="font-size: 15px; color: rgb(160, 160, 160); text-align: right;">Letter to Employee share plan participants and vested share account holders</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- DATE BAR
-->
<table width="101%" border="0" cellspacing="0" cellpadding="0" style="border-top: 1px #cbe584 solid; border-bottom: 1px #cbe584 solid;">
<tr>
<td>
<table class="container" width="620" align="center" border="0">
<tr>
<td valign="center" class="content" width="11">
<img width="11" height="18" style="border: currentColor; display: block;" alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={92ea31c6-db2f-4a58-92be-612a005a812a}&source=image" border="0">
</td>
<td valign="center" class="content" style="padding: 8px 00px 10px 7px; font-family:Arial, Helvetica, sans-serif; font-size: 10px; color: rgb(102, 102, 102);">
<p align="left">[[Date]]</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width="100%" style="table-layout: auto;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td background="http://www-uk.computershare.com/WebContent/doc.aspx?docid={fdcaa3da-9056-4488-abc9-ffd3385873a6}&source=image" style="background-repeat: repeat-x;">
<img width="1" height="4" style="border: currentColor; display: block;" alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={9cb2e036-9ade-44b8-bb2e-fe83998f9c10}&source=image" border="0">
</td>
</tr>
</table>
<!-- MAIN BODY OF EMAIL
-->
<table width="101%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<table class="container" width="620" align="center" border="0" cellpadding="0" cellspacing="0" style="padding-top: 25px;">
<!-- PHOTO
-->
<tr>
<td valign="top" class="photo">
<p><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={b57cc0e1-58e0-4ae6-a684-9e747eb276b4}&source=image" width="620" height="227" border="0"></p>
</td>
</tr>
<!-- USER DATA
-->
<tr>
<td valign="top" class="content" style="padding: 20px 00px 10px 00px; font-family:Arial, Helvetica, sans-serif; font-size: 18px; line-height:22px; color: rgb(0, 130, 0);">
<p>Your Company Number is: [[company_number]]<br />
Your Voting Control Number is: [[control_number]]<br />
Your Account Number is: [[account_number]]</p>
</td>
</tr>
<!-- MAIN TEXT START
-->
<tr>
<td valign="top" class="content" style="padding: 10px 0px 20px 0px; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 12px; line-height:16px; color: #444;">
<p style="color: rgb(0, 130, 0); font-size: 14px;">text</p>
<p>text</p>
<p>text</p>
<p>text</p>
</td>
</tr>
<tr>
<td valign="top" class="content" style="padding: 0px 0px 25px 0px; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; line-height:22px; color: #444;">
<table class="buttonleft" width="192" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#008200" style="margin-right: 10px;">
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;" valign="bottom"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={3ab49298-4a5c-4353-9fa1-6ade0555dd3c}&source=image" width="3" height="3" border="0" style="display: block;"></td>
<td style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="9" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="3" style="line-height: 1px; font-size: 1px; border: currentColor;" valign="bottom"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={e4967ac1-c90c-46ba-93f7-b9b30b6cb56e}&source=image" width="3" height="3" border="0" style="display: block;"></td>
</tr>
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td>
<p class="button1" style="margin: 0px; color: #FFFFFF; font-family: arial, helvetica, sans-serif; font-size: 14px; margin: 1 40 1 0;"><a style="color: #FFFFFF; text-decoration: none;" href="#" target="_blank">View the online 2015 reports</a></p>
</td>
<td valign="center" width="20"><img width="6" height="8" style="border: currentColor; display: block; padding: 0 7 0 7;" alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={4e86a826-c7fa-40f2-ab04-e8437a9512e6}&source=image" border="0"></td>
<td width="3" style="line-height: 1px; font-size: 1px;"><p> </p></td>
</tr>
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={200b97ea-585f-4050-b8d6-2ed01c0c38cf}&source=image" width="3" height="3" border="0" style="display: block;"></td>
<td style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="9" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="3" style="line-height: 1px; font-size: 1px;"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={5cb333ad-b384-46a1-b2f1-2ace135e3aee}&source=image" width="3" height="3" border="0" style="display: block;"></td>
</tr>
</table>
<table class="button" width="192" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#008200">
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;" valign="bottom"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={3ab49298-4a5c-4353-9fa1-6ade0555dd3c}&source=image" width="3" height="3" border="0" style="display: block;"></td>
<td style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="9" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="3" style="line-height: 1px; font-size: 1px; border: currentColor;" valign="bottom"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={e4967ac1-c90c-46ba-93f7-b9b30b6cb56e}&source=image" width="3" height="3" border="0" style="display: block;"></td>
</tr>
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td>
<p class="button2" style="margin: 0px; color: #FFFFFF; font-family: arial, helvetica, sans-serif; font-size: 14px; margin: 1 10 1 0;"><a style="color: #FFFFFF; text-decoration: none;" href="#" target="_blank">Find out more about this years AGM</a></p>
<td valign="center" width="20"><img width="6" height="8" style="border: currentColor; display: block; padding: 0 7 0 7;" alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={4e86a826-c7fa-40f2-ab04-e8437a9512e6}&source=image" border="0"></td>
<td width="3" style="line-height: 1px; font-size: 1px;"><p> </p></td>
</tr>
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={200b97ea-585f-4050-b8d6-2ed01c0c38cf}&source=image" width="3" height="3" border="0" style="display: block;"></td>
<td style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="9" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="3" style="line-height: 1px; font-size: 1px;"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={5cb333ad-b384-46a1-b2f1-2ace135e3aee}&source=image" width="3" height="3" border="0" style="display: block;"></td>
</tr>
</table>
<table class="buttonright" width="192" align="left" border="0" cellpadding="0" cellspacing="0" bgcolor="#008200" style="margin-left: 10px;">
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;" valign="bottom"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={3ab49298-4a5c-4353-9fa1-6ade0555dd3c}&source=image" width="3" height="3" border="0" style="display: block;"></td>
<td style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="9" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="3" style="line-height: 1px; font-size: 1px; border: currentColor;" valign="bottom"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={e4967ac1-c90c-46ba-93f7-b9b30b6cb56e}&source=image" width="3" height="3" border="0" style="display: block;"></td>
</tr>
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td>
<p class="button3" style="margin: 0px; color: #FFFFFF; font-family: arial, helvetica, sans-serif; font-size: 14px; margin: 1 40 1 0;"><a style="color: #FFFFFF; text-decoration: none;" href="#" target="_blank">Vote your shares online now</a></p>
<td valign="center" width="20"><img width="6" height="8" style="border: currentColor; display: block; padding: 0 7 0 7;" alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={4e86a826-c7fa-40f2-ab04-e8437a9512e6}&source=image" border="0"></td>
<td width="3" style="line-height: 1px; font-size: 1px;"><p> </p></td>
</tr>
<tr>
<td width="13" style="line-height: 1px; font-size: 1px;"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={200b97ea-585f-4050-b8d6-2ed01c0c38cf}&source=image" width="3" height="3" border="0" style="display: block;"></td>
<td style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="9" style="line-height: 1px; font-size: 1px;"><p> </p></td>
<td width="3" style="line-height: 1px; font-size: 1px;"><img alt="" src="http://www-uk.computershare.com/WebContent/doc.aspx?docid={5cb333ad-b384-46a1-b2f1-2ace135e3aee}&source=image" width="3" height="3" border="0" style="display: block;">
</td>
</tr>
</table>
</tr>
<tr>
<td valign="top" class="content" style="padding: 20px 0px 25px 0px; font-family:Tahoma, Arial, Helvetica, sans-serif; font-size: 10pt; line-height:22px; color: #444; border-top-color: rgb(160, 160, 160); border-top-width: 1px; border-top-style: dashed;">
<p>body</p>
</td>
</tr>
<!-- MAIN TEXT STOP
-->
</table>
</td>
</tr>
</table>
<!-- FOOTER
-->
<table width="101%" border="0" cellspacing="0" cellpadding="0" style="border-top: 1px #cbe584 solid;">
<tr>
<td>
<table class="container" width="620" align="center" border="0">
<tr>
<td valign="top" class="content" style="padding: 30px 00px 10px 00px; font-family:Tahoma, Helvetica, sans-serif; font-size: 10px; color: rgb(102, 102, 102);">
<p align="center" style="line-height: 14px;">@ Copyright 2016 BP p.l.c. 1 St James's Square, London, SW1Y 4PD. Registered in England and Wales, number 102498</p>
<p align="center"><a style="color: rgb(0, 126, 1); text-decoration: none;" href="http://comms.bp.com/t/1PGC-3YA77-A1BC5P-1XG7T9-1/c.aspx" target="_blank">Legal notice</a> | <a style="color: rgb(0, 126, 1); text-decoration: none;" href="http://comms.bp.com/t/1PGC-3YA77-A1BC5P-1XG7TA-1/c.aspx" target="_blank">Privacy statement</a> | <a style="color: rgb(0, 126, 1); text-decoration: none;" href="http://comms.bp.com/t/1PGC-3YA77-14A1BC5P8C/uns.aspx" target="_blank">Unsubscribe from this email</a> | <a style="color: rgb(0, 126, 1); text-decoration: none;" href="http://comms.bp.com/t/1PGC-3YA77-A1BC5P-1XG7TB-1/c.aspx" target="_blank">Edit profile</a></p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Hi Terence,
Outlook won't allow tables to sit side by side without around 20px additional padding that it adds.
Easiest way around this for you since you're just starting out is to change the alignment on the right hand table to right, then reduce the width of this table to 75%. That will allow the gap to be added by Outlook and won't bump your second table to another row.
Alternatively, a technique most of us use is the Ghost Table technique. Adding Outlook specific code to allow tables to sit right up against each other, without any issues:
http://labs.actionrocket.co/make_mobile_email_work_in_outlook
The margin/padding issues...
You're better off converting the margin to padding and moving it to the td. Much better support, email client wide.
Your buttons would actually be a really good area to try the Ghost Table technique I linked above. Using it will allow you to use the widths you wanted, in all email clients.
Then to get the margining to work between the buttons, I would:
Fixed your issues up in the code below.
Make sure to have a good look through at the sections I was talking about.
Understanding these techniques will really solidify your skills and you'll be a pro in no time!
Oh and never ever feel embarrassed or worry about asking for help, this is what we're all in this community for.
I've asked some silly and usually obvious questions ion my time but from time to time you just need a fresh pair of eyes to pick out what you're passing over or to show you another way to approach things.
Let me know if you need me to walk you through any of this some more. Happy to help in any way :)
I didn't ask the question but you are a star/hero for being so helpful.
Thanks Katra.
I try my best to help others out as much as I can so when I'm in trouble in the future, someone else will return the favour :)
Hi Niven,
Thanks for the reply, I sent the email out with a gap to one side, I made it part of the design in the end so it wasn't noticeable.
After reading through your reply I can see where I was going wrong and will revisit this again when I get a chance, I'm getting requests for stuff like this more regularly so if I can get the buttons working this way without the padding issue it will be a big help in the future.
I will let you know how I get on, thanks again for the advice.