Yes, that's possible, albeit not literally the <td>, but what's in it. The simple trick is, to make sure that the content extends to the borders of the cell (it won't include the borders itself though).
As already explained, this isn't semantically correct. An a element is an inline element and should not be used as block-level element. However, here's an example (but JavaScript plus a td:hover CSS style will be much neater) that works in most browsers:
<td>
<a href="http://example.com">
<div style="height:100%;width:100%">
hello world
</div>
</a>
</td>
PS: it's actually neater to change a in a block-level element using CSS as explained in another solution in this thread. it won't work well in IE6 though, but that's no news ;)
If your world is only Internet Explorer (rare, nowadays), you can violate the HTML standard and write this, it will work as expected, but will be highly frowned upon and be considered ill-advised (you haven't heard this from me). Any other browser than IE will not render the link, but will show the table correctly.
<table>
<tr>
<a href="http://example.com"><td width="200">hello world</td></a>
</tr>
</table>
Use this code. It expands an <a> to fill the cell horizontally. To fill vertically, use the height property as well.
td a {_x000D_
width: 100%;_x000D_
display: block;_x000D_
}_x000D_
_x000D_
td {_x000D_
/* Cell styles for demonstration purposes only */_x000D_
border: 1px solid black;_x000D_
width: 10em;_x000D_
}<table><tr>_x000D_
<td>_x000D_
<a href="http://example.com">_x000D_
Hello World_x000D_
</a>_x000D_
</td>_x000D_
</tr></table>I'd like to make the entire td a hyperlink. I'd prefer without javascript. Is this possible?
That's not possible without javascript. Also, that won't be semantic markup. You should use link instead otherwise it is a matter of attaching onclick handler to <td> to redirect to some other page.
You can creat the table you want, save it as an image and then use an image map to creat the link (this way you can put the coords of the hole td to make it in to a link).
This might be the most simple way to make a whole <td> cell an active hyperlink just using HTML.
I never had a satisfactory answer for this question, until about 10 minutes ago, so years in the making #humor.
Tested on Firefox 70, this is a bare-bones example where one full line-width of the cell is active:
<td><a href=""><div><br /></div></a></td>
Obviously the example just links to "this document," so fill in the href="" and replace the <br /> with anything appropriate.
Previously I used a style and class pair that I cobbled together from the answers above (Thanks to you folks.)
Today, working on a different issue, I kept stripping it down until <div> </div> was the only thing left, remove the <div></div> and it stops linking beyond the text. I didn't like the short "_" the displayed and found a single <br /> works without an "extra line" penalty.
If another <td></td> in the <tr> has multiple lines, and makes the row taller with word-wrap for instance, then use multiple <br /> to bring the <td> you want to be active to the correct number of lines and active the full width of each line.
The only problem is it isn't dynamic, but usually the mouse is closer in height than width, so active everywhere on one line is better than just the width of the text.
I would recommend using an actual anchor element, and set it as block.
<div class="divBox">
<a href="#">Link</a>
</div>
.divBox
{
width: 300px;
height: 100px;
}
.divBox a
{
width: 100%;
height: 100%;
display: block;
}
This will set the anchor to the same dimensions of the parent div.
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)
Source: Stackoverflow.com