html - 电子邮件中可点击的 HTML 表格

Question

我正在尝试创建一个可点击的 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>

提前致谢

Answer 1

添加样式 color: inherit;在你的<a>标签。它应该看起来像这样:

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