Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I make a link from a <td> table cell

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?

like image 246
aeq Avatar asked Jul 26 '10 18:07

aeq


People also ask

How do you make a TD link?

Just by adding an anchor tag inside TD you can make TD element work as a link.

How do you make a link in a table?

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.

How do you make a whole row in a table clickable as a link?

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.

How do you make a TD tag 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.


1 Answers

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

Alternative (non-advised) solution

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> 
like image 89
Abel Avatar answered Oct 01 '22 00:10

Abel