how to make a cell of table hyperlink

Question

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

replica of http://stackoverflow.com/questions/3337914/how-to-make-a-td-a-link — Usman, Apr 09 '12 at 07:37
Already discussed. The answer is here: http://stackoverflow.com/a/3966257/1320588 Regards. — sleepwalker, Apr 09 '12 at 07:38
@vaichidrewar you can vote to close a question as a duplicate of another question now that you have over 3000 reputation. — Andrew Grimm, Sep 30 '16 at 04:59

score 43 · Accepted Answer · edited Jul 12 '14 at 16:00

43

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.

edited Jul 12 '14 at 16:00

Zaz

46,476
14
84
101

answered Apr 09 '12 at 07:38

Kamal

2,140
8
33
61

1

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... – Mahdi Jazini Nov 02 '16 at 16:32

score 22 · Answer 2 · answered Apr 09 '12 at 07:32

22

Try this way:

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

answered Apr 09 '12 at 07:32

azawaza

3,065
1
17
20

Thanks for quick reply but did not work. – vaichidrewar Apr 09 '12 at 07:37
3

PS: The style="display:block" in the element will make it occupy all the space inside thus making the entire cell a hyperlink like you wanted. – azawaza Apr 09 '12 at 16:47
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 Nov 02 '16 at 16:03

score 15 · Answer 3 · answered Jun 16 '14 at 01:16

15

Easy with onclick-function and a javascript link:

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

answered Jun 16 '14 at 01:16

Philip

175
1
2

When using the other answers, the link does not necessarily take up all the space in the `` element. This is the only answer that solved the problem! – jfdoming Feb 01 '15 at 21:58
4

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. – ChrisFox Dec 10 '15 at 09:14
1

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. – Xiyng May 08 '18 at 09:09

score 5 · Answer 4 · answered Feb 21 '18 at 16:41

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>

answered Feb 21 '18 at 16:41

shootz

59
1
2

I wish I knew why more people don't like this answer. I'm going to use this. – codenoob Feb 09 '19 at 02:22

score 1 · Answer 5 · answered Apr 12 '14 at 17:58

Here is my solution:

<td>
   <a href="/yourURL"></a>
   <div class="item-container">
      <img class="icon" src="/iconURL" />
      <p class="name">
         SomeText
      </p>
   </div>
</td>

(LESS)

td {
  padding: 1%;
  vertical-align: bottom;
  position:relative;

     a {
        height: 100%;
        display: block;
        position: absolute;
        top:0;
        bottom:0;
        right:0;
        left:0;
       }

     .item-container {
         /*...*/
     }
}

Like this you can still benefit from some table cell properties like vertical-align.(Tested on Chrome)

This sort-of works, but as I move my cursor over the cell it alternates between a pointer and a hand. — Hawkee, Nov 30 '15 at 16:52

score 1 · Answer 6 · answered Nov 02 '16 at 16:17

Problems:

(User: Kamal) It's a good 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! even with vertical-align:middle;

(User: Christ) Your answer is the best answer, because there is no any align problem and also today JavaScript is necessary for every one... it's in every where even in an old smart phone... and it's enable by default...

My Suggestion to complete answer of (User: Christ):

HTML:

<td style="cursor:pointer" onclick="location.href='mylink.html'"><a class="LN1 LN2 LN3 LN4 LN5" href="mylink.html" target="_top">link</a></td>

CSS:

a.LN1 {
  font-style:normal;
  font-weight:bold;
  font-size:1.0em;
}

a.LN2:link {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN3:visited {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN4:hover {
  color:#A4DCF5;
  text-decoration:none;
}

a.LN5:active {
  color:#A4DCF5;
  text-decoration:none;
}

I like this answer the best. – Gregory Grant Jan 02 '22 at 17:52 — Gregory Grant, Jan 02 '22 at 17:52

score 1 · Answer 7 · answered Oct 17 '20 at 14:19

1

you can give an <a> tag the visual behavior of a table cell:

HTML:

<table>
  <tr>
    <a href="...">Cell 1</a>
    <td>Cell 2</td>
  </tr>
</table>

CSS:

tr > a {
  display: table-cell;
}

answered Oct 17 '20 at 14:19

Ben

719
6
25

This works best, makes the whole cell clickable, and works even if the cell has no content, don't need to add any ` `. CSS might need some additional tweaks to make it work the same, like `vertical-align:center`, but that's fine. – Magnus Feb 14 '23 at 04:34

score 0 · Answer 8 · answered Feb 21 '18 at 20:03

0

I have seen this before when people are trying to build a calendar. You want the cell linked but do not want to mess with anything else inside of it, try this and it might solve your problem.

<tr>
<td onClick="location.href='http://www.stackoverflow.com';">
Cell content goes here
</td>
</tr>

answered Feb 21 '18 at 20:03

Jason

9
1

1

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. – GKFX Aug 31 '18 at 10:52

score 0 · Answer 9 · answered Jul 15 '20 at 11:26

Not exactly making the cell a link, but the table itself. I use this as a button in e-mails, giving me div-like controls.

<a href="https://www.foo.bar" target="_blank" style="color: white; font-weight: bolder; text-decoration: none;">
  <table style="margin-left: auto; margin-right: auto;" align="center">
    <tr>
      <td style="padding: 20px; height: 60px;" bgcolor="#00b389">Go to Foo Bar</td>
    </tr>
  </table>
</a>

score 0 · Answer 10 · edited May 27 '22 at 12:59

If you want use this way in php Do the following

<?php 
    echo ("
        <script type = 'text/javascript'>
            function href() {
                location.href='http://localhost/dept';
            }
        </script>

        <tr onclick='href()'>
            <td>$id</td>
            <td>$deptValue</td>
            <td> $month </td>
            <td>100%</td>    
        </tr>
    ");
?>

score 0 · Answer 11 · answered Apr 21 '23 at 09:07

I ran into this issue and used the display block method to let the a element fill the whole cell. The only issue is that when the table cells have padding not the entire cell is clickable.

I used css to remove the padding from table cells that contain anchors and added the same padding to the anchors.

So I ended up with this:

table {
  border-collapse: collapse;
}

td,
th {
  border: 1px solid #ddd;
}

td,
th,
.anchor_cell a {
    padding: 8px;
}

.anchor_cell {
  padding: 0;
}

.anchor_cell a {
  display: block;
}

<table>
        <thead>
            <tr>
                <th>Name</th>
                <th>ID</th>
            </tr>
        </thead>
        <tbody>
          <tr>
            <td class="anchor_cell"><a href="/the_url">John Doe</a></td>
            <td>1</td>
          </tr>
          <tr>
            <td class="anchor_cell"><a href="/the_url">Jane Doe</a></td>
            <td>1</td>
          </tr>
        </tbody>
    </table>

how to make a cell of table hyperlink

11 Answers11

Linked

Related