Anchor around table - NOT working in outlook

Question

I'm developing a newsletter for Mailchimp with below HTML structure for one of the block -

<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center"> 
<tr> 
    <td valign="top" class="complete-block">
        <a href="#" target="_blank">
            <table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable> 
                <tr> 
                    <td align="center"  valign="middle" class="templateButtonContent"> Amazon </td> 
                </tr> 
            </table>
        </a> 
        <a href="#" target="_blank">
            <table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable> 
                <tr> 
                    <td  align="center" valign="middle" class="templateButtonContent"> Apple iBooks </td> 
                </tr> 
            </table>
        </a> 
        <a href="#" target="_blank">
            <table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable> 
                <tr> 
                    <td align="center" valign="middle"  class="templateButtonContent"> Nook </td> 
                </tr> 
            </table>
        </a>
        <a href="#" target="_blank">
            <table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable> 
                <tr> 
                    <td align="center"  valign="middle" class="templateButtonContent"> Google </td> 
                </tr> 
            </table>
        </a>
        <a href="#" target="_blank">
            <table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable> 
                <tr> 
                    <td align="center" valign="middle"  class="templateButtonContent"> Kobo </td> 
                </tr> 
            </table>
        </a>
        <a href="#" target="_blank">
            <table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton display-inline" mc:hideable> 
                <tr> 
                    <td align="center" valign="middle"  class="templateButtonContent"> Sony </td> 
                </tr> 
            </table>
        </a> 
    </td>
</tr>

The problem is that when I tested the template on Outlook, I found that my buttons [Amazon, google, nook etc] don't have LINK.

What am I missing? Can't we wrap a table in anchor tag?

Answer 1

HTML emails still lack the features that browsers makeup for on websites, it's like developer in HTML for IE 5. The anchor tag will not work around tables and sometimes will not even work around divs, however obviously webpages do not have these problems. This is due to the standards not really being recognised by mail clients as they are in browsers.

Try wrapping the content in the cells in just the anchor tag, around your button:

<table border="0" cellpadding="9" width="100%" align="center" cellspacing="0" class="templateButton displayinline" mc:hideable>
    <tr>
    <td align="center" valign="middle" class="templateButtonContent">
            <a href="#" target="_blank">Sony</a>
        </td>
    </tr>
</table>

I know it's not ideal, however it is a way around this problem.