HTML电子邮件：使用可点击表格

发布时间：2020-12-14 18:33:40 所属栏目：资源来源：网络整理

导读：我正在构建一个 HTML电子邮件,并希望整个表可以点击. 我已经提出了一个JavaScript解决方案来做到这一点,它运行得很好但是我更喜欢将表包装在标签中而不是使用JavaScript. a href="#" table border="0" tr td style="width: 100px; height: 100px" /td /tr /t

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

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

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

这在Firefox中运行得很好,虽然它不是有效的HTML,因为我在一个内联的一个()中包含一个块级元素().

我目前没有办法在所有电子邮件平台上测试这个,所以想知道是否有任何已知的电子邮件平台不支持这种方法？

任何帮助将不胜感激.

如果有人正在寻找一个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>

解决方法

这适用于Firefox,因为在HTML5中,您可以围绕块元素(< table>)包装链接.

但是,在电子邮件中,您仍然坚持使用HTML4,以及它的一个非常有限的子集.这包括使用JavaScript – 这在Gmail,Yahoo,Outlook和所有其他大型邮件客户端中不起作用.

所以你有两个选择：

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

这些链接可能会帮助您：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!