How to wrap a table in a link?

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;
        });

What about `...
`? Note that such behavior is uncommon to the user. — Zeta, Mar 18 '12 at 00:05
It ought be. You don't always need to be valid when doing things in HTML, but it's highly suggested for various reasons. — Kinz, Mar 18 '12 at 00:07
I think a better question is what on earth is that doing as a table when it looks like it can be tackled with flow elements, which *would* allow wrapping in an anchor. — James Aylett, Mar 18 '12 at 00:09
Uggh, adding a navigation clickhandler to a table is a usability nightmare. Why not just wrap the image inside the table cell in a link? — steveax, Mar 18 '12 at 00:11
@steveax: That would be too easy.... Just kidding. I guess the OP is using a `` to center the image vertically and horizontally. @steveax: I agree. If you can't copy or click the content of a table it is not a table but a static image, so OP could replace the table by an image and avoid all this unnecessary work. However, the additional "grab the URL like this" information baffles me, time to get some sleep, hope I don't dream of usability nightmares. — Zeta, Mar 18 '12 at 00:18

score 1 · Answer 1 · edited May 23 '17 at 12:27

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?

edited May 23 '17 at 12:27

Community

1
1

answered Mar 18 '12 at 00:09

Johannes Staehlin

3,680
7
36
50

score 1 · Answer 2 · answered Mar 18 '12 at 06:01

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.

dangerChihuahua007 · Answer 3 · 2012-03-18T00:17:43.693

0

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.

edited Mar 18 '12 at 00:17

answered Mar 18 '12 at 00:09

dangerChihuahua007

20,299
35
117
206

thanks for answer. how can I do your javacript in jquery? Please see my edit above. thanks. – Run Mar 18 '12 at 00:16
I added how to do the same Javascript functionality in jQuery. I wasn't sure what you specifically meant by grab the link URL. Assuming `$('.grap').attr('action')` is your link URL, just replace `'123.php'` (even the single quotes too because that's a string) in my jQuery code above with `$('.grap').attr('action')`. – dangerChihuahua007 Mar 18 '12 at 00:23
it seems that html5 allow us to wrap a block level element in an inline element - http://davidwalsh.name/html5-elements-links so it must be safe to wrap a `table` in a `a` tag, right? – Run Mar 18 '12 at 00:23
Hmm, perhaps so based on that article. I still don't feel comfortable wrapping an anchor tag around a block level element. First off, it makes me feel old :P Secondly, it doesn't semantically make sense. How could an inline element (which is literally supposed to be in a line of text) wrap a block element (which is supposed to be an area of the page)? – dangerChihuahua007 Mar 18 '12 at 00:26
Wrapping a table in an `a` element is [perfectly valid in HTML5](http://validator.nu/) but surely you could accomplish the same visual appearance with more straightforward markup. Why not just wrap the `a` around the image, and give it `display: block` and the other styles you have assigned to the table and td? – steveax Mar 18 '12 at 01:02

How to wrap a table in a link?

3 Answers3

Linked