How to link block level elements in html e-mails?

Question

What would be the best way to make a whole block of content clickable in an html email so that it also works in Outlook (2003, 2007, 2010).

For example, I have this Call-To-Action:

So far I've come up with this:

  <table cellpadding="0" cellspacing="0" style="border: 1px #ffffff dashed;">
    <!-- NAVIGATION AREA START -->
    <tr>
      <td width="370" style="font-family:'Times New Roman', Times, serif;font-size: 22px;font-weight:bold;line-height:52px;">
        <div style="margin-left: 15px; margin-top: 0; margin-bottom: 0; height:100%;">
            <a href="http://${servername}/" style="text-decoration:none;color:#fff;">
                LEARN MORE ABOUT ABOUT THIS
            </a>
        </div>
      </td>
      <td width="160">
        <table cellpadding="0" cellspacing="0" height="24">
            <tr>
                <td>
                    <div style="background-color:#fff; margin-top: 0; margin-bottom: 0;width:128px;height:24px;color: #000000;text-decoration: none;font-size: 12px;line-height: 24px;">
                        <a href="http://${servername}/" style="text-decoration:none;color:#000;margin-left: 5px;">
                            CLICK HERE
                        </a>
                    </div>
                </td>
                <td>
                    <img style="display: block;" width="13" height="24" border="0" alt="" title="" src="http://${servername}/images/mailing/arrow-white.png" />
                </td>
            </tr>
        </table>
      </td>
    </tr>
    <!-- NAVIGATION AREA END -->
  </table>

The problem is that the whole area within the dashed border should be clickable. I tried wrapping the whole table with an a tag, but this doesn't work in Outlook or IE (it works in Firefox).

Or, consider this:

<table width="255" cellspacing="0" cellpadding="0" bgcolor="#000000" style="border: 10px solid #fff;">
    <tr>
        <td valign="top" style="width:130px;padding-bottom: 15px; padding-top: 15px; padding-left: 15px;">
            <p style="color:#ffffff;font-family:'Times New Roman', Times, serif;font-size: 16px;margin-top: 0; margin-bottom: 5px;">
                <strong>FAQ</strong>
            </p>
            <p style="font-family: arial,sans-serif; font-size: 14px; color:#d0d0d0; line-height: 20px; margin-top: 0; margin-bottom: 0;">
                Learn more about our services.
            </p>
        </td>
        <td align="center" style="padding-bottom: 15px; padding-top: 15px;">
            <p style="margin-top: 0;margin-bottom: 0;">
                <img width="54" height="102" border="0" src="http://${servername}/images/mailing/questionmark.png" title="" alt="">
            </p>
        </td>
    </tr>
</table>

Here too, the whole block (within the white border) should be clickable, not just the individual lines of text.

How would you go about this, considering the bad support for CSS in Outlook 2007/2010 (e.g. no display CSS-property)?

Bottom line: How to link a block level alement without being able to wrap it with a (tried with table and div) or using display: block;?

Answer 1

This answer will aim to show how all different options render in Outlook (2013), starting with the "best" solution found so far:

<table width="100%" style="background-color: #ccc;"><tr>
<td style="padding: 15px; text-align: center;">
    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
        Go to some great website!
    </a>
</td>
</tr></table>

This will be rendered like this:

Or, with the link hitbox annotated:

Yeah, that sucks: you want the entire block to be clickable. Basically I'm here to tell you that the answer to the question "how to link block elements (outlook-compatible)" is: this is not possible, not without workarounds.

---

To support my claim (PS. I highly welcome anyone proving this claim wrong!), here's all the variations I've tried, with their respective renderings in Outlook. I've tried to include some solutions suggested in other answers too.

Here's the code I've used to generate e-mails:

<html>
    <head>
        <title>My e-mail</title>
    </head>
    <body>
        <table width="660px" align="center" border="0" cellspacing="0" cellpadding="0" style="width: 660px;">
            <tr>
                <td style="padding: 15px;">

                    <p>1. The "best" text-only version I've found:</p>
                    <table width="100%" style="background-color: #ccc;"><tr>
                    <td style="padding: 15px; text-align: center;">
                        <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                            Go to some great website!
                        </a>
                    </td>
                    </tr></table>

                    <hr />
                    <p>2a. Workaround using an image. Setting size through style attribute does not work.</p>
                    <a href="http://www.stackoverflow.com">
                        <img alt="Go to some great website!" src="your custom image" style="width: 100%; height: 30px;" />
                    </a>

                    <hr />
                    <p>2b. Workaround using an image. Kind of works, but requires an image of exactly correct size through attributes.</p>
                    <a href="http://www.stackoverflow.com">
                        <img alt="Go to some great website!" src="your custom image" width="640px" height="30px" />
                    </a>

                    <hr />
                    <p>3. Attempt to link the entire table. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                        <table width="100%" style="background-color: #ccc;"><tr>
                        <td style="padding: 15px; text-align: center;">
                                Go to some great website!
                        </td>
                        </tr></table>
                    </a>

                    <hr />
                    <p>5. Attempt to link the entire div. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style="text-decoration: none; color: #333;">
                        <div style="background-color: #ccc; padding: 15px; text-align: center;">
                            Go to some great website!
                        </div>
                    </a>

                    <hr />
                    <p>6. Setting anchor tag to display as a block. Does not work.</p>
                    <a href="http://www.stackoverflow.com" style=" display: block; text-decoration: none; color: #333; background-color: #ccc; padding: 15px; text-align: center;">
                        Go to some great website!
                    </a>

                    <hr />
                    <p>6. Hacking with line-height, does not work.</p>
                    <div style="background-color: #ccc; text-align: center;">
                        <a href="http://www.stackoverflow.com" style="line-height: 3em; text-decoration: none; color: #333;">
                            <span style="vertical-align: middle;">Go to some great website!</span>
                        </a>
                    </div>

                </td>
            </tr>
        </table>
    </body>
</html>

And here's how they're rendered by Outlook 2013, annotated with the link hitbox: