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

Affix

replica of https://mcmap.net/q/237821/-how-can-i-make-a-link-from-a-lt-td-gt-table-cell – Lansquenet

Already discussed. The answer is here: https://mcmap.net/q/168402/-make-link-in-table-cell-fill-the-entire-row-height Regards. – Gladysglagolitic

@Affix you can vote to close a question as a duplicate of another question now that you have over 3000 reputation. – Reine

Answer 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.

Hydrotherapeutics

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... – Muncy

Answer 2

Try this way:

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

Ania

Thanks for quick reply but <td href=google.com style='display:block;'> did not work. – Affix

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. – Ania

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... – Muncy

Answer 3

Easy with onclick-function and a javascript link:

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

Evangelina

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! – Zola

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. – Nekton

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. – Cockatrice

Answer 4

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>

Salaam

I wish I knew why more people don't like this answer. I'm going to use this. – Denudation

Answer 5

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)

Vento

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

Answer 6

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

Muncy

I like this answer the best. – Whithersoever

Answer 7

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

Compress

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. – Slusher

Answer 8

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>

Ashley

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. – Ardrey

Answer 9

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>

Carruthers

Answer 10

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>
    ");
?>

Tocharian

Answer 11

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>

Photon