如何在链接中包装表格？答案

【问题标题】：How to wrap a table in a link?如何在链接中包装表格？
【发布时间】：2012-04-03 00:51:41
【问题描述】：

哪些元素允许链接？

我想在table 周围包装一个链接，

<a href="123.php" class="grap" >
    <table border="1" style="width:600px; height:600px;">
        <tbody>
            <tr>
                <td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
            </tr>
        </tbody>
    </table>
</a>

但这不是http://validator.w3.org/中的正确html

我可以把链接放在像这样的形式中，

<form action="123.php" class="grap" >
    <table border="1" style="width:600px; height:600px;">
        <tbody>
            <tr>
                <td align="center" style="border:1px solid red"><img src="thumb-pic-1.jpg" alt="123"/></td>
            </tr>
        </tbody>
    </table>
</form>

但link 或table 并不意味着是表单提交...

我想知道是否有在链接中包装表格的方法？

编辑：

抱歉忘了提我需要像这样抓取链接网址，

$('.grap').click(function(){
            alert($(this).attr('action'));
            return false;
        });

【问题讨论】：

<table onclick="window.location.href='123.php'">...</table> 怎么样？请注意，这种行为对用户来说并不常见。
应该是。在 HTML 中做事时，您并不总是需要有效，但出于各种原因，强烈建议您这样做。
我认为一个更好的问题是，当它看起来可以用流元素来解决时，作为一个表格做到底是什么，将允许包装在一个锚中。
呃，向表格添加导航点击处理程序是一场可用性噩梦。为什么不直接将图片包含在表格单元格中的链接中？
@steveax：那太容易了……开玩笑。我猜 OP 正在使用 <table> 将图像垂直和水平居中。 @steveax：我同意。如果您无法复制或单击表格的内容，则它不是表格而是静态图像，因此 OP 可以用图像替换表格并避免所有这些不必要的工作。然而，额外的“像这样抓取 URL”信息让我感到困惑，该睡觉了，希望我不要做可用性噩梦。

标签： html hyperlink html-table href

【解决方案1】：

浏览器允许您将表格包装在链接中。它的实际问题与渲染有关（浏览器可能会或可能不会在文本内容下划线并在链接内的图像周围绘制边框），而不是基本功能。例如，根据 HTML 4.01，它是无效的，但那又怎样？

在您的示例中，表格仅包含一个单元格，其中仅包含一张图像。您可以只使用 img 元素并适当地设置它的样式。在更复杂的情况下，表格可能很有用。然后你可能应该在 CSS 中为它设置color 和text-decoration，为其中包含的任何img 设置border，这样你就可以得到你喜欢的渲染，而不是像这种情况下不同的浏览器默认渲染。

【讨论】：

【解决方案2】：

您不能将块级元素（例如表格）包装在内联元素（例如锚点）中。但是，您可以使用display: block; 来制作锚块级别。

您还可以使用 Javascript 事件处理程序来链接表格。例如，您可以在 head 标记中包含此 sn-p 代码，将 onclick 事件分配给表。

其中，idOfYourSpecifiedTable 是您的表的 id 属性（即<table id='idOfYourSpecifiedTable'>），

<script type="text/javascript">
    document.getElementById('idOfYourSpecifiedTable').onclick = function() {window.location.href='123.php'};
</script>

或在 jQuery 中

<script type="text/javascript">
    $(function() {
        $('#idOfYourSpecifiedTable').click(function() {window.location.href='123.php';});
    });
</script>

此外，您甚至可以使用#idOfYourSpecifiedTable {cursor: pointer;} 使光标在客户端悬停在其上时成为指针（手）。

但是，这种方法有其弱点。值得注意的是，搜索引擎机器人可能不会检测到您的表格链接到您网站的另一个页面。

【讨论】：

感谢您的回答。我怎样才能在 jquery 中做你的 javacript？请参阅我上面的编辑。谢谢。
我添加了如何在 jQuery 中执行相同的 Javascript 功能。我不确定您抓取链接 URL 的具体含义。假设 $('.grap').attr('action') 是您的链接 URL，只需将上面的 jQuery 代码中的 '123.php'（甚至是单引号，因为那是一个字符串）替换为 $('.grap').attr('action')。
似乎 html5 允许我们将块级元素包装在一个内联元素中 - davidwalsh.name/html5-elements-links 所以在 a 标签中包装 table 一定是安全的，对吧？跨度>
嗯，也许是基于那篇文章。我仍然觉得在块级元素周围包裹锚标记感到不舒服。首先，它让我觉得自己老了 :P 其次，它在语义上没有意义。内联元素（字面意思应该是在一行文本中）如何包装块元素（应该是页面的一个区域）？
在a 元素中包装表格是perfectly valid in HTML5，但您当然可以使用更直接的标记来实现相同的视觉外观。为什么不直接将a 包裹在图像周围，然后给它display: block 以及您分配给table 和td 的其他样式？

【解决方案3】：

<a> 是一个内联元素，<table> 是一个块元素。 xhtml 的内联元素中不允许有块元素。但是桌子上的点击监听器，或者桌子周围的 div 呢？效果应该是一样的。

这对您来说可能也很有趣： Is it wrong to change a block element to inline with CSS if it contains another block element?

【讨论】：