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}&amp;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}&amp;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}&amp;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&nbsp;vested&nbsp;share&nbsp;account&nbsp;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}&amp;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}&amp;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}&amp;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}&amp;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>&nbsp;</p></td>
                                <td width="9" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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>&nbsp;</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}&amp;source=image" border="0"></td>
                                <td width="3" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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}&amp;source=image" width="3" height="3" border="0" style="display: block;"></td>
                                <td style="line-height: 1px; font-size: 1px;"><p>&nbsp;</p></td>
                                <td width="9" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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}&amp;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>&nbsp;</p></td>
                                <td width="9" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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>&nbsp;</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}&amp;source=image" border="0"></td>
                                <td width="3" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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}&amp;source=image" width="3" height="3" border="0" style="display: block;"></td>
                                <td style="line-height: 1px; font-size: 1px;"><p>&nbsp;</p></td>
                                <td width="9" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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}&amp;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>&nbsp;</p></td>
                                <td width="9" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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>&nbsp;</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}&amp;source=image" border="0"></td>
                                <td width="3" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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}&amp;source=image" width="3" height="3" border="0" style="display: block;"></td>
                                <td style="line-height: 1px; font-size: 1px;"><p>&nbsp;</p></td>
                                <td width="9" style="line-height: 1px; font-size: 1px;"><p>&nbsp;</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}&amp;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;">&#64;&nbsp;Copyright&nbsp;2016&nbsp;BP&nbsp;p.l.c.&nbsp;1&nbsp;St&nbsp;James's&nbsp;Square,&nbsp;London,&nbsp;SW1Y&nbsp;4PD. Registered&nbsp;in&nbsp;England&nbsp;and&nbsp;Wales,&nbsp;number&nbsp;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>