如何将<table>放入<a>标签中？

Question

把 table 放在 a 标签内是一个好的解决方案吗？当 table 被包裹时，为什么链接不起作用呢？

<a href="/place">
  <table>
    <tr>
      <td>
        <span class="place-icon" />
      </td>
      <td> 
        My place name
      </td>
    </tr>
  </table>
</a>

- Oleg Dats

---

你的代码对我有效 http://jsfiddle.net/4UrtT/ - Andy

你能否重新表达一下你的开头语和标题，使得对于寻找类似内容的人更有帮助？我认为没有人会搜索“实现下一个HTML”。 - Robin Maben

Answer 1

我需要实现下一个HTML。

不，你不需要，也不应该。真的。它是无效的、不语义化的，而且（也许最重要的是）因为这些原因不能可靠地工作。

如果你只想要一个带有图像和一些文本（链接）的东西，请使用类似于：

<a href="/place" class="button">My Place Name</a>

.button {
    display: inline-block;
    background-image: url();
    background-position: 2px 2px;
    padding-left: 16px; /* size of image */
}

这是一个可用的示例： http://jsfiddle.net/RvTp3/ 根据评论，这里还有另一个示例，展示了当文本换行时将图像垂直居中对齐：http://jsfiddle.net/RvTp3/1/

- Tim M.

---

很好的评论，但我需要将图像“垂直居中”http://jsfiddle.net/rPsEJ/进行对齐。 - Oleg Dats

顺便提一下，还有另一个问题，如果你想减小“line-height: 32px;”，那么图片将被裁剪。 - Oleg Dats

这里有一些更复杂的布局可以让你尝试。如果你不知道图像或文本的大小，那就更加复杂了：http://jsfiddle.net/RvTp3/4/ - Tim M.

我想这么做的一个原因是因为在电子邮件中，如果没有表格，布局会有问题。 - Gherman

@Gherman 我同意电子邮件通常需要使用表格进行整体布局。这仍然会产生有效的HTML；它只是与正常的良好实践有所偏差。将表格放在锚点内是无效的，因此如果电子邮件客户端/服务器在呈现之前尝试检查/清理标记，则可能会导致不可预测的结果。在将表格放入锚点之前，我会尝试其他方法，但如果这是唯一有效的方法，那就去做吧。 - Tim M.

Answer 2

不是这样的。你不应该这样做。

如果你想要启用表格上的点击，那么你可以通过将点击事件附加到表格来实现。

 <table  onclick="window.location='yoururl'">
    <tr>
      <td>
        <span class="place-icon" />
      </td>
      <td> 
        My place name
      </td>
    </tr>
  </table>

- Raab

---

问题是：你应该这样做吗？ - kapa

Answer 3

我觉得你只是想要一个带有图标和文本链接到 /place 的链接，而且你使用 <table> 只是为了布局，对吧？为什么不摆脱表格，使用 CSS 进行布局呢？

- Ridcully

---

是的，但是怎样像http://jsfiddle.net/rPsEJ/上那样垂直对齐文本和图片呢？ - Oleg Dats

@OlegDats，就像Tim Medora上面的示例一样，您可以通过相应地设置background-position来调整图像的对齐方式。 - Ridcully