How to wrap a table in a link? - html

Question

What elements allow link?
I want to wrap a link around a 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>
But it is not a correct html as in http://validator.w3.org/
I can put the link in a form like this,
<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>
But the link or the table is not meant to be a form form submission...
I wonder if there are anyway to wrap a table in a link?
EDIT:
Sorry forgot the mention that I need to grab the link url like this,
$('.grap').click(function(){
alert($(this).attr('action'));
return false;
});

Answer 1

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

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 3

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.