电子邮件中的可点击 HTML 表格答案

【问题标题】：Clickable HTML Table in email电子邮件中的可点击 HTML 表格
【发布时间】：2018-10-04 21:20:19
【问题描述】：

我正在尝试创建一个可点击的 HTML 表格，它不会使文本显示为超链接——这会使整个表格链接起来。在花了几个小时筛选之前关于这个主题的帖子之后，我认为我已经弄清楚了代码并让它在 HTML 编辑器中工作。

但是，当我向自己发送测试电子邮件示例时，代码不起作用。在 Outlook 中，表格显示为可单击但未链接。在 Gmail 中，它不会显示为可点击且未链接。

一位非常有帮助的评论者告诉我，我不能在表格之外有 <a> 标记，但是如果我将 <a> 标记移动到 <td> 内部，那么它只会链接文本，而不是整张桌子。

有解决办法吗？

这是我的代码：

<a href="http://google.com" style="text-decoration:none">
  <table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
     <tbody>
         <tr id="clickable" style="cursor:pointer">    
            <td style="text-align: center;"><strong>TEXT</strong></td>
            <td style="text-align: center;"><strong>TEXT</strong></td>
            <td style="text-align: center;"><strong>TEXT</strong></td>
         </tr>
         <tr id="clickable" style="cursor:pointer">
            <td style="text-align: center;">
               <strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
            </td>
            <td style="text-align: center;">
                <strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
            </td>
            <td style="text-align: center;">
                <strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
            </td>
         </tr>
      </tbody>
  </table>
</a>

提前非常感谢

【问题讨论】：

你不能在桌子周围做。您需要在每个 td 中执行
我正在尝试将整个表格链接起来。不会把它放在 td 标签中只链接文本吗？
@HeshamAbuSaif 从 HTML5 开始，您现在可以在锚标记中包装许多元素，包括 <table>。
@Rob 公平地说，这是我们正在处理的电子邮件。
@jla 我明白你现在在说什么，谢谢！我查看了原件，有趣的是，表格（或其中的文本）在原件中根本没有出现。原始 HTML 中有一个版本的代码，但它已被 gmail 切碎和修改，所以我无法解释它试图告诉我的内容。但是，该 HTML 示例中的 href 和链接以不同的形式出现。

标签： html css html-email

【解决方案1】：

在<a> 标签中添加样式color: inherit;。它应该是这样的：

<a href="http://google.com" style="text-decoration:none;color:inherit">

<a href="http://google.com" style="text-decoration:none;color:inherit">
      <table align="center" border="1" cellpadding="10" cellspacing="0" style="width:200px;">
         <tbody>
             <tr id="clickable" style="cursor:pointer">
                <td style="text-align: center;"><strong>TEXT</strong></td>
                <td style="text-align: center;"><strong>TEXT</strong></td>
                <td style="text-align: center;"><strong>TEXT</strong></td>
             </tr>
             <tr id="clickable" style="cursor:pointer">
                <td style="text-align: center;">
                   <strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
                </td>
                <td style="text-align: center;">
                    <strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
                </td>
                <td style="text-align: center;">
                    <strong><span style="color:#0c85c8;">TEXT</span>-<span style="color:#e7413D;">TEXT</span></strong>
                </td>
             </tr>
          </tbody>
      </table>
    </a>

【讨论】：

我不确定这是为了解决可点击问题，还是只是我的代码的一个单独问题。但是，我用这段代码对其进行了测试，并且遇到了同样的问题。
邮件有很多限制。它无法解释代码中的所有样式。除此之外，电子邮件客户端对您的代码有不同的响应，这就是您必须使代码尽可能简单的原因。