how to make a cell of table hyperlink

html hyperlink href

295,467

Solution 1

Try this:

HTML:

<table width="200" border="1" class="table">
    <tr>
        <td><a href="#">&nbsp;</a></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>

CSS:

.table a
{
    display:block;
    text-decoration:none;
}

I hope it will work fine.

Solution 2

Try this way:

<td><a href="..." style="display:block;">&nbsp;</a></td>

Solution 3

Easy with onclick-function and a javascript link:

<td onclick="location.href='yourpage.html'">go to yourpage</td>

Solution 4

I have also been looking for a solution, and just found this code on another site:

<td style="cursor:pointer" onclick="location.href='mylink.html'">link</td>

Solution 5

Why not combine the onclick method with the <a> element inside the <td> for backup for non-JS? Seems to work great.

<td onclick="location.href='yourpage.html'"><a href="yourpage.html">Link</a></td>

View more solutions

295,467

Author by

vaichidrewar

@Bloomreach

Updated on October 18, 2020

Comments

vaichidrewar over 3 years
How can entire table cell be hyperlinked in html without javascript or jquery?

I tried to put href in td tag itself but its not working at least in chrome 18
```
<td href='http://www.m-w.com/dictionary/' style="cursor:pointer">
```
vaichidrewar about 12 years

Thanks for quick reply but <td href=google.com style='display:block;'> did not work.
azawaza about 12 years

PS: The style="display:block" in the <a> element will make it occupy all the space inside <td> thus making the entire cell a hyperlink like you wanted.
jfdoming over 9 years

When using the other answers, the link does not necessarily take up all the space in the <td> element. This is the only answer that solved the problem!
Hawkee over 8 years

This sort-of works, but as I move my cursor over the cell it alternates between a pointer and a hand.
ChrisFox over 8 years

This also does not create a true hyperlink, so for example, the link destination does not appear a the bottom of the view in Chrome, and you cannot Ctrl-click to open the destination in a new tab, etc.
Mahdi Jazini over 7 years

yes, it's the best way but you forgot the vertical align problem! using this way we can't put the link exactly at the center of the td element... test it yourself... with style="display:block;" and without style="display:block;" i think maybe the javascript way is better because today javascript is necessary for every one...
Mahdi Jazini over 7 years

yes, it's the best way but you forgot the vertical align problem! using this way we can't put the link exactly at the center of the td element... test it yourself... with style="display:block;" and without style="display:block;" i think maybe the JavaScript way is better because today JavaScript is necessary for every one... look at my answer...
Xiyng about 6 years

This is a really ugly solution, as it prevents opening the link in a new tab in any way (as far as I know). I've encountered this behaviour somewhere, and it's really annoying. It's even more annoying if you have an actual link in the cell, suggesting it works as usual, and then when you Ctrl-click for a new tab, it opens the link in both the same tab and a new one.
GKFX over 5 years

This is identical to @Christ's solution. Thanks for the answer, but try to avoid posting duplicates of what's already here. Note that this answer suffers from the same problem as the one it duplicates: it's a needless use of Javascript, which is likely to cause problems for e.g. accessibility software.
codenoob over 5 years

I wish I knew why more people don't like this answer. I'm going to use this.
Gregory Grant over 2 years

I like this answer the best.