I have the following:
<td> some text <div>a div</div> </td>
I'd like to make the entire <td>...</td>
a hyperlink. I'd prefer without the use of JavaScript. Is this possible?
Just by adding an anchor tag inside TD you can make TD element work as a link.
You just put an img tag inside the table cell (< td > tag). The src attribute's value can be any valid URL of an image on the Web , local or remote.
Using <a> tag inside <td> One more way to make the whole row clickable is to add an <a> inside every <td> element. Along with it add hover to the row which we want to make clickable and use display: block property to anchor to make the whole row clickable.
You can put the anchor inside the td and then set the anchor to display:block and it will fill the table cell. e.g. However if your design is more complicated than that then you can't put block level elements inside that anchor. You would then need to use javascript for IE6 as it only understands hover on anchors.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With