Take the 2-minute tour ×

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">
    <td style="width: 100px; height: 100px">

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:

                <script type="text/javascript">
                function link(url){
                alert("url is "+url);
                <table style="background-color: red" border="0" onclick="link('test url');" onmouseover="this.style.cursor='pointer';">
                    <td style="width: 100px">This is a </td>
                    <td style="width: 100px; background-color: blue">test </td>
                    <td style="width: 100px">table </td>
share|improve this question
Why do you want the entire table to be clickable, going to one link? That doesn't seem like a very usable design to me. –  Tim Jan 31 '12 at 16:38
@Tim I can't speak for the OP, but it's a common way of coding emails because you suffer from problems such as image blocking, lack of support or inconsistent rendering on tags like <div>s. Plus, marketing managers frequently want 'maximum clickable area' - the goal of an email is often just to get as many clicks as possible, not act as a repository of information. –  Blowski Jan 31 '12 at 16:42
+1 Blowski, thanks for clarifying. –  Tim Jan 31 '12 at 17:58
add comment

4 Answers

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:

share|improve this answer
Thanks very much. The 'saving the table as an image' option isn't viable as the data within it is dynamic. I'm thinking about adding the JavaScript then in addition, making the main components of the table clickable so that if JavaScript is disabled or not working then at least some of the table is still clickable. Does this sound like my best option? –  user1180733 Jan 31 '12 at 16:59
So wrapping the same link around multiple bits of text is really your only choice. You can use big line-heights and make sure any text you use is displayed as a block element, to minimise the 'whitespace isn't clickable' problem. –  Blowski Jan 31 '12 at 17:02
The JavaScript won't work in about 99% of cases, and will harm your deliverability. I wouldn't use it at all. –  Blowski Jan 31 '12 at 17:03
Thanks for that. –  user1180733 Jan 31 '12 at 17:30
add comment

You wont be able to use javascript in an email... All styles need to be inline, also no javascript, email clients will not render that.

share|improve this answer
I have attempted to make the entire table clickable by wrapping any text, image or whitespace in <a href>..</a>. I have also specified the line-height for each td. However, although this looks good in Firefox and Chrome, Safari is somehow adding a tiny amount of height to some of the elements as is the email client I am uploading it to. Any suggestions ? Should I be keeping it simple and only making certain parts of the table clickable? –  user1180733 Feb 2 '12 at 12:33
add comment

its not that you want the entire table to be clickable its that you want your a href tag overlaid on your table.

here is a quick example using the table you have provided.

    <a href="#" style="display:block; width:100%; height:100%"></a>
share|improve this answer
add comment

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...

share|improve this answer
add comment

Your Answer


