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

前端之家收集整理的这篇文章主要介绍了HTML电子邮件:使用可点击表格前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在构建一个 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/

猜你在找的HTML相关文章