Question

我正在构建一个HTML电子邮件，并希望整个表格可以点击。

我已经提出了一个JavaScript解决方案来做到这一点，它运行得非常好但是我更喜欢将表包装在标签中而不是使用JavaScript。

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

这在Firefox中运行得很好，虽然它不是有效的HTML，因为我在内联one（）中包含了一个块级元素（）。

我目前无法在所有电子邮件平台上测试此功能，所以想知道是否有任何已知的电子邮件平台不支持此方法？

非常感谢任何帮助。

如果有人正在寻找一个JavaScript解决方案来执行相同的功能，那么下面是一个：

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

Answer 1

这适用于Firefox，因为在HTML5中，您可以围绕块元素（<table>是）包围链接。

但是，在电子邮件中，您仍然坚持使用HTML4，并且它也是一个非常有限的子集。这包括使用JavaScript - 这在Gmail，Yahoo，Outlook和所有其他大型邮件客户端中都不起作用。

所以你有两个选择：

将您的表格保存为图片，然后将链接标记包裹起来。缺点是图像关闭后文本不会显示。
使表格中的所有内容都可以点击 - 即在文本的所有位置重复“a”标记。这里的缺点是任何空的空间（即没有文字或图像的区域）都不会被点击。

这些链接可能会对您有所帮助：

Answer 2

你无法在电子邮件中使用javascript ...所有样式都需要内联，也没有javascript，电子邮件客户端也不会呈现。

Answer 3

你不能在桌子周围做<a>。你需要在每个td内做<a> s。我刚刚为客户端做了这个，并在Outlook 2010中进行了测试，所以我知道这有效; 如果它有文本，请使文本可单击..您可以使用style =“text-decoration：none;”修复下划线。在其他领域，我只是在其中放入一个透明的GIF。但是，gif需要是表格中该字段的全宽和高度...否则它将无效。

不优雅..但它有效。现在，既然你可以在表中使用背景（也在outlook中有一些代码可用的源代码），你可以随心所欲地使用它......

Answer 4

Litmus有很多选择。其中一个使用表格边框和填充作为黑客：

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

尝试并在大多数电子邮件客户端上工作。虽然我仍然在寻找方法来做到这一点而不用硬编码边框/填充。

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

Answer 5

并非您希望整个表格可以点击，而是希望您的href标签覆盖在您的桌子上。

这是使用您提供的表格的快速示例。

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

HTML电子邮件：使用<a href=""></a>使表格可点击

5 个答案: