HTML Emails: making table clickable using

Question

I am building an HTML email and want to make an entire table clickable.

I have already come up with a JavaScript solution to do this, which works perfectly well however I would prefer to just wrap the table in tags and not use JavaScript.

<a href="#">
  <table border="0">
   <tr>
    <td style="width: 100px; height: 100px">
    </td>          
   </tr> 
  </table>
</a>

This works well enough in Firefox although it is not valid HTML given I'm enclosing a block level element () within an inline one ().

I currently don't have the means to test this on all email platforms so would like to know if there are any known email platforms that will not support this approach?

Any help would be greatly appreciated.

If anyone is looking for a JavaScript solution to perform the same function then here is one below:

            <html>
                <head>
                <title></title>
                <script type="text/javascript">
                function link(url){
                alert("url is "+url);
                }
                </script>
                </head>
                <body>
                <table style="background-color: red" border="0" onclick="link('test url');" onmouseover="this.style.cursor='pointer';">
                  <tr>
                    <td style="width: 100px">This is a </td>
                    <td style="width: 100px; background-color: blue">test </td>
                    <td style="width: 100px">table </td>
                  </tr>
                </table>
                </body>
            </html>

Malachi · Accepted Answer

You cannot do an <a> around a table. You need to do <a>s inside each td. I just did this for a client, and tested it in Outlook 2010, so I know this works; If it has text, make the text clickable.. you can fix the underline with style="text-decoration:none;". In the other fields, I would just put a transparent gif in it. However, the gif needs to be the full width and height of that field in the table... otherwise it wouldn't work.

Not elegant.. but it works. Now, since you CAN use a background in the table (also in outlook.. there are some sources with code available for this), you can make it as fancy as you like...

Dan Blows · Answer

This works in Firefox, because in HTML5 you can wrap a link around a block element (which a <table> is).

In email, however, you are stuck with HTML4, and a very limited subset of it as well. This includes using JavaScript - that doesn't work in Gmail, Yahoo, Outlook, and all the other big mail clients.

So you have two options:

Save your table as an image, and just wrap the link tag around that. The downside is that your text won't show when the images are turned off.
Make everything in your table clickable - i.e. repeat your 'a' tag around all the bits of text. The downside here is that any empty space (i.e. areas with no text or images) won't be clickable.

These links might help you:

http://www.campaignmonitor.com/css/
http://www.sitepoint.com/code-html-email-newsletters/

HTML Emails: making table clickable using <a href>

Tags:

html

html-email

user1180733

2 Answers

Malachi

Dan Blows

Recent Activity

Donate For Us