13

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>
Dan Blows
  • 20,846
  • 10
  • 65
  • 96
user1180733
  • 141
  • 1
  • 1
  • 3
  • 1
    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
  • 8
    @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 `
    `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.
     – Dan Blows Jan 31 '12 at 16:42
  • 1
    Possible duplicate of [How can I make a link from a table cell](https://stackoverflow.com/questions/3337914/how-can-i-make-a-link-from-a-td-table-cell) – Veve Aug 17 '17 at 12:01

5 Answers5

15

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:

Dan Blows
  • 20,846
  • 10
  • 65
  • 96
  • 1
    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
  • 1
    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. – Dan Blows Jan 31 '12 at 17:02
  • 3
    The JavaScript won't work in about 99% of cases, and will harm your deliverability. I wouldn't use it at all. – Dan Blows Jan 31 '12 at 17:03
  • 1
    Additionally, to address the "whitespace isn't clickable" problem, I found that adding left/right padding to an inside a that has top/bottom padding of approximately equal size created a nice large clickable area that expanded past the actual text. For me, this helped more than the big line-heights. – Paul Prewett Jan 28 '17 at 11:56
  • @PaulPrewett Can you please share the code? – Deepak Kumar Jan 12 '21 at 05:33
4

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

Andrew Barber
  • 39,603
  • 20
  • 94
  • 123
Malachi
  • 977
  • 6
  • 16
  • 31
  • 3
    the problem i have is that only the text becomes clickable and not the entire td cell, still looking for a solution for Outlook. I couldn't find any guides yet re transparent gif you mentioned. – Markus Jun 11 '20 at 13:01
4

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.

Drew Dahlman
  • 4,952
  • 1
  • 22
  • 34
  • 1
    I have attempted to make the entire table clickable by wrapping any text, image or whitespace in ... 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 02 '12 at 12:33
3

Litmus has a range of options for this. One of which using table border and padding as hack:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td>
      <table border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" style="-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;" bgcolor="#e9703e"><a href="#" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; text-decoration: none; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: 12px 18px; border: 1px solid #e9703e; display: inline-block;">I am a button &rarr;</a></td>
        </tr>
      </table>
    </td>
  </tr>
</table>

Tried and work on most email clients. Although Im still looking for ways to do this without hardcoding the border/padding.

source: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design

Alvida
  • 145
  • 1
  • 1
  • 9
0

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.

<table border="0" cellpadding ="0" width="100%">
 <tr>
  <td style="width: 100px; height: 100px">
    <a href="#" style="display:block; width:100%; height:100%"></a>
  </td>          
 </tr> 
</table>
nate_weldon
  • 2,289
  • 1
  • 26
  • 32
  • 1
    I tried using this approach, and found (via Email On Acid) that it doesn't work in any version of Outlook. (And Outlook is all that really matters for this workaround since other email clients *do* support wrapping a table with a block-level link) – rinogo Mar 10 '16 at 17:32
  • Yes, I am facing the same issue, it does not work on outlook. How to make the table clickable on outlook? – Kamal Patra Oct 06 '22 at 21:43