how to make a cell of table hyperlink - html

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

Answer 1

Try this:
HTML:
<table width="200" border="1" class="table">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
CSS:
.table a
{
display:block;
text-decoration:none;
}
I hope it will work fine.

Answer 2

Try this way:
<td> </td>

Answer 3

Easy with onclick-function and a javascript link:
<td onclick="location.href='yourpage.html'">go to yourpage</td>

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'">Link</td>

Answer 5

Here is my solution:
<td>
<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)

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

Answer 7

you can give an <a> tag the visual behavior of a table cell:
HTML:
<table>
<tr>
Cell 1
<td>Cell 2</td>
</tr>
</table>
CSS:
tr > a {
display: table-cell;
}

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>

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>

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