Question

哪些元素允许链接？

我希望打包围绕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;
        });

Answer 1

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

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

Answer 2

浏览器允许您将表格包装在链接中。它的实际问题涉及渲染（浏览器可能会或可能不会强调文本内容并在链接内的图像周围绘制边框），而不是基本功能。例如，它不符合HTML 4.01，但那又如何呢？

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

Answer 3

您无法将块级元素（例如表）包装在内联元素（例如锚点）中。但是，您可以使用display: block;来设置锚块级别。

您还可以使用Javascript事件处理程序来链接表。例如，您可以在头标记中使用此片段代码将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;}使光标成为指针（手）。

然而，这种方法有其缺点。值得注意的是，搜索引擎机器人可能无法将您的表格检测为链接到您网站的其他网页。

Answer 4

你可以让桌子认为它是一个链接。

<table border="0" style="cursor:pointer" onMouseover="window.status='http://www.stackoverflow.com/'" onMouseout="window.status=''" onMouseup="window.location='http://www.stackoverflow.com/'" width="158" height="158" style="background-image: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png')">
    <tr>
        <td style="display:none;">This entire table is a link with no content</td>
    </tr>
</table>

如何在链接中包装表？

4 个答案: