Making whole <td> Clickable through anchor tag

Question

While creating an html email for Outlook, I stumbled upon a small problem that I have not been able to fix.

Below is a screen shot of an html table. I need to make the whole area clickable and not just the text. When I put <a href="#"> around the <td> or <table> it works in browsers but not in Outlook.

Here is the code:

<table border="0" cellpadding="0" cellspacing="0" style="border-top-left-radius: 5px;border-top-right-radius: 5px;border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;background-color: #2FBA45;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
    <tbody>
        <tr>
            <td align="center" valign="middle" style="font-family: Arial;font-size: 22px;padding: 15px;border-collapse: collapse;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
                <a href="#" title="Yes please, send me a quote." target="_self" style="font-weight: bold;letter-spacing: -0.5px;line-height: 100%;text-align: center;text-decoration: none;color: #FFFFFF;word-wrap: break-word !important; display:block; width:100%; height:100%">Yes please, send me a quote.</a>
            </td>
        </tr>
    </tbody>
</table>

Solution

I know this is an old question, but I was looking for an answer to this problem (clickable whole buttons in Outlook) and stumbled upon the following solution:

<table border="0" cellpadding="0" cellspacing="0">
    <tbody>
        <tr>
            <td align="center" valign="middle" >

<!-- start of Outlook compatible button generated by http://buttons.cm/ -->
<div><!--[if mso]>
  <v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://yoururlhere.com/" style="height:52px;v-text-anchor:middle;width:330px;" arcsize="10%" stroke="f" fillcolor="#2fba45">
    <w:anchorlock/>
    <center>
  <![endif]-->
      <a href="http://yoururlhere.com/"
style="background-color:#2fba45;border-radius:5px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:52px;text-align:center;text-decoration:none;width:330px;-webkit-text-size-adjust:none;">Yes please, send me a quote.</a>
  <!--[if mso]>
    </center>
  </v:roundrect>
<![endif]--></div>
<!-- end of Outlook compatible button generated by http://buttons.cm/ -->

            </td>
        </tr>
    </tbody>
</table>

Note I have not tested the above code.

Other answers did link to the campaignmonitor website, but not this link which provided the solution.

That blog post at campaignmonitor mentions that they have created a specific website to generate outlook compatible clickable buttons - http://buttons.cm based on a solution created by Stig M (@stigm on twitter).

I do not work for campaignmonitor.

Hope that helps someone.

Comments

[Java Student]

its not working even in browsers , is there anyway i change my code like span etc to get same output ?