CODEWITHSUNDEEP
csshtml-tablehrefhtml-emailnewsletter
user2088260
user2088260

Reputation:

Making whole <td> Clickable through anchor tag

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.

enter image description here

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>

Upvotes: 4

Views: 17481

Answers (5)

Achal Parikh
Achal Parikh

Reputation: 127

Use JavaScript "innerHTML" property. By default, in HTML5 you cannot directly add an anchor tag in a table cell element.

<html>
<title>
</title>
<head>
</head>
<body>

    <table>
        <thead>
             <tr>
                 <td>Youtube</td>
                 <td id="assign_anchor_tag_here"></td>
            </tr>
        <thead>
    </table>

<script>
    var td_element = document.getElementById("assign_anchor_tag_here");
    td_element.innerHTML = "<a href='https://www.youtube.com'>Click Here!</a>";
</script>

Upvotes: -1

Chris Adol
Chris Adol

Reputation: 166

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.

Upvotes: 1

John
John

Reputation: 12193

Try removing the target="_self". As Outlook is a email client, it probably doesn't recognize it and may be causing the issue.

On a side note, If you are using anchor links within your email (linking elsewhere on the same page), this is not fully supported in all email browsers. Here is the support chart

Upvotes: 0

Pieter
Pieter

Reputation: 1833

You can try to use the onClick, <td onClick="go to anchor">. In the inline style you should add cursor: pointer so the cursor is changed to the 'hover a link'-pointer.

Upvotes: 1

Falguni Panchal
Falguni Panchal

Reputation: 8981

try this

http://jsfiddle.net/KrRzP/ 

<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; cursor:pointer;">
    <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="http://www.example.org" 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>

Upvotes: 1

Related Questions