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

Question

I have the following:

<td> some text <div>a div</div> </td> 

I would like to make the whole hyperlink <td>...</td> . I would prefer without using JavaScript. Is it possible?

Answer 1

Yes, it is possible, although not literally <td> , but what is in it. A simple trick is to make sure that the content extends to the borders of the cell (it will not include the borders themselves).

As already explained, this is not semantically correct. The a element is an inline element and should not be used as a block level element. However, here's an example (but JavaScript plus the CSS: 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: actually a forward change of a in a block element using CSS as explained in another solution in this thread . it will not work well in IE6, though, but that there is no news;)

Alternative (not recommended) solution

If your world is just Internet Explorer (rarely, at present), you can violate the HTML standard and write this, it will work as expected, but will be strongly condemned and considered illogical (you have not heard this from me). Any other browser than IE will not display the link, but will display the table correctly.

 <table> <tr> <a href="http://example.com"><td width="200">hello world</td></a> </tr> </table> 

Answer 2

Use this code:

 <td> <a href="http://example.com"> hello world </a> </td> 

CSS code:

 td a{width:100%;display:block;} 

Answer 3

I would recommend using the actual anchor element and setting it as a block.

 <div class="divBox"> <a href="#">Link</a> </div> .divBox { width: 300px; height: 100px; } .divBox a { width: 100%; height: 100%; display: block; } 

This will snap to the same dimensions of the parent div.

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

(SMALLER)

 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 { /*...*/ } } 

Similarly, you can still use some of the properties of a table cell, such as vertical-align . (Tested in Chrome)

Answer 5

I would like to make the whole td a hyperlink. I would prefer JavaScript. Is it possible?

This is not possible without javascript. Also, this will not be semantic markup. You should use the link instead, otherwise it involves linking onclick to <td> to redirect to another page.

Answer 6

You can create the table you want, save it as an image, and then use the image map to create the link (this way you can put the coordinates of the td hole to get into the link).