'how to make a cell of table hyperlink

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


Solution 1:[1]

Try this way:

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

Solution 2:[2]

Easy with onclick-function and a javascript link:

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

Solution 3:[3]

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>

Solution 4:[4]

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)

Solution 5:[5]

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

Solution 6:[6]

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>

Solution 7:[7]

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>

Solution 8:[8]

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

Solution 9:[9]

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

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 azawaza
Solution 2 Philip
Solution 3 shootz
Solution 4 amp
Solution 5 Mahdi Jazini
Solution 6 Jason
Solution 7 Grextarosta
Solution 8 Ben
Solution 9 Samball

Related Questions