CODEWITHSUNDEEP
html
Leon Weber
Leon Weber

Reputation: 793

HTML5: Make an entire table row clickable without javascript

I would like to have an entire table row clickable, without using javascript. The Internets tell me this isn't possible with HTML4, but I'm using HTML5, so I'm hopeful.

However, the obvious doesn't work:

<table>    
    <a href="foo">
        <tr>
            <td>…</td>
            <td>…</td>
        </tr>
    </a>
</table>

Firebug reveals that Firefox pulls the <tr/> element out of the <a/> wrapper when computing the element tree, and puts an empty <a/> before the <table/> like this:

<a href="foo"> </a>
<table>
    …
</table>

This looks to me like what I'm trying is either not allowed by the standard, or there's a bug in Firefox (and Chromium, which showed the same behaviour). I'm guessing the former, and indeed, the HTML5 specification tells us that <td/> can't be used within an <a/> element, but only within other table-elements: The tr element.

Any other hints on how I could achieve clickable table rows using HTML5?

Upvotes: 2

Views: 3251

Answers (2)

Leon Weber
Leon Weber

Reputation: 793

Apparently, this hasn’t changed in HTML5, so we’re still left with the mentioned workarounds.

Upvotes: 3

Fisch
Fisch

Reputation: 3815

You can have the clickable row span the number of columns you need and put the content I that one row

<table>    
        <tr>
            <td>col 1</td>
            <td>col 2</td>
        </tr>
        <tr >
            <td colspan="2">
                <a href="foo">
                   Clickable stuff.  If you need table columns here, you can nest a second table here
                </a>
            </td>
        </tr>
</table>

Upvotes: 0

Related Questions