HTML 电子邮件：使用 <a href> 使表格可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9083184/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML Emails: making table clickable using <a href>
提问by user1180733
I am building an HTML email and want to make an entire table clickable.
我正在构建一个 HTML 电子邮件，并希望使整个表格可点击。
I have already come up with a JavaScript solution to do this, which works perfectly well however I would prefer to just wrap the table in tags and not use JavaScript.
我已经想出了一个 JavaScript 解决方案来做到这一点，它工作得很好，但我更愿意将表格包装在标签中而不是使用 JavaScript。
<a href="#">
<table border="0">
<tr>
<td style="width: 100px; height: 100px">
</td>
</tr>
</table>
</a>
This works well enough in Firefox although it is not valid HTML given I'm enclosing a block level element () within an inline one ().
这在 Firefox 中工作得很好，尽管它不是有效的 HTML，因为我将一个块级元素 () 包含在内联元素 () 中。
I currently don't have the means to test this on all email platforms so would like to know if there are any known email platforms that will not support this approach?
我目前没有办法在所有电子邮件平台上进行测试，所以想知道是否有任何已知的电子邮件平台不支持这种方法？
Any help would be greatly appreciated.
任何帮助将不胜感激。
If anyone is looking for a JavaScript solution to perform the same function then here is one below:
如果有人正在寻找 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>
回答by Dan Blows
This works in Firefox, because in HTML5 you can wrap a link around a block element (which a <table>is).
这在 Firefox 中有效，因为在 HTML5 中，您可以将链接包裹在块元素（即 a <table>）周围。
In email, however, you are stuck with HTML4, and a very limited subset of it as well. This includes using JavaScript - that doesn't work in Gmail, Yahoo, Outlook, and all the other big mail clients.
然而，在电子邮件中，您只能使用 HTML4，以及它的一个非常有限的子集。这包括使用 JavaScript - 这在 Gmail、Yahoo、Outlook 和所有其他大型邮件客户端中不起作用。
So you have two options:
所以你有两个选择：
- Save your table as an image, and just wrap the link tag around that. The downside is that your text won't show when the images are turned off.
- Make everything in your table clickable - i.e. repeat your 'a' tag around all the bits of text. The downside here is that any empty space (i.e. areas with no text or images) won't be clickable.
- 将您的表格另存为图像，然后将链接标签包裹在其周围。缺点是当图像关闭时，您的文本不会显示。
- 使表格中的所有内容都可点击 - 即在所有文本位周围重复您的 'a' 标签。这里的缺点是任何空白区域（即没有文本或图像的区域）都无法点击。
These links might help you:
这些链接可能对您有所帮助：
回答by Drew Dahlman
You wont be able to use javascript in an email... All styles need to be inline, also no javascript, email clients will not render that.
您将无法在电子邮件中使用 javascript...所有样式都需要内联，也没有 javascript，电子邮件客户端不会呈现。
回答by Malachi
You cannot do an <a>around a table. You need to do <a>s inside each td.
I just did this for a client, and tested it in Outlook 2010, so I know this works;
If it has text, make the text clickable.. you can fix the underline with style="text-decoration:none;". In the other fields, I would just put a transparent gif in it. However, the gif needs to be the full width and height of that field in the table... otherwise it wouldn't work.
你不能<a>围着桌子做。您需要<a>在每个 td 内执行s。我只是为一个客户这样做，并在 Outlook 2010 中对其进行了测试，所以我知道这是有效的；如果它有文本，使文本可点击.. 你可以用 style="text-decoration:none;" 修复下划线。在其他领域，我只会在其中放一个透明的 gif。但是，gif 必须是表格中该字段的全宽和全高……否则将无法正常工作。
Not elegant.. but it works. Now, since you CAN use a background in the table (also in outlook.. there are some sources with code available for this), you can make it as fancy as you like...
不优雅..但它有效。现在，由于您可以在表格中使用背景（也在 Outlook 中......有一些可用的代码来源），您可以随心所欲地制作它......
回答by Alvida
Litmus has a range of options for this. One of which using table border and padding as hack:
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 →</a></td>
</tr>
</table>
</td>
</tr>
</table>Tried and work on most email clients. Although Im still looking for ways to do this without hardcoding the border/padding.
尝试并在大多数电子邮件客户端上工作。尽管我仍在寻找无需对边框/填充进行硬编码的方法来做到这一点。
source: https://litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
来源：https: //litmus.com/blog/a-guide-to-bulletproof-buttons-in-email-design
回答by nate_weldon
its not that you want the entire table to be clickable its that you want your a href tag overlaid on your table.
并不是您希望整个表格都可以点击，而是您希望将 href 标签覆盖在表格上。
here is a quick example using the table you have provided.
这是一个使用您提供的表格的快速示例。
<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>
