How to wrap a table in a link?

Answer 1

Browsers let you wrap a table inside a link. The practical problems with it relate to rendering (browsers may or may not underline the text content and draw borders around images inside a link), not with basic functionality. It’s not valid as per HTML 4.01 for example, but so what?

In your example, the table contains just one cell that contains just one image. You could instead use just an img element and style it suitably. In a more complicated case, a table might be useful. Then you should probably set color and text-decoration for it in CSS and border for any img contained in it, so that you get the rendering you prefer and not the varying browser default rendering for a situation like this.

Answer 2

You could make the table think it's a link.

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

Answer 3

<a> is an Inline-Element and <table> is a block element. Block elements are not allowed in inline elements in xhtml. But what about a click listener on the table, or an div around the table? The effect should be the same.

This might be also interesting for you: Is it wrong to change a block element to inline with CSS if it contains another block element?

Answer 4

You can not wrap a block level element (such as a table) in an inline element (such as an anchor). You could, however, use display: block; to make the anchor block level.

You could also use Javascript event handlers to link the table. For instance, you could have this snippet of code in your head tag that assigns an onclick event to the table.

Where, idOfYourSpecifiedTable is the id attribute of your table (ie <table id='idOfYourSpecifiedTable'>),

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

or in jQuery

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

Furthermore, you could even use #idOfYourSpecifiedTable {cursor: pointer;} to make the cursor a pointer (hand) when a client hovers over it.

However, this method has its weaknesses. Notably, a search engine robot will likely not detect your table as linked to another page of your site.