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

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>&nbsp;</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.

The <td><a></a></td> methods left the cell-padding of the <td> unclickable unfortunately.

This method makes the whole TD clickable, all the way up to the borders.

Combining a few commenter's suggestions,

• you set the <td>'s padding to 0, and then

• embed an <a>-enclosed <div> with the desired cell padding. The padding is thus part of the <a href>.

Like this:

HTML:

<td class="fulltd">
    <a class="fulltd" href="https://soundcloud.com/demis-john">
    <div class="fulltd">
        Link To Soundcloud
    </div>
    </a>
</td>

CSS:

/* Remove <td>'s interior cell-padding */
td.fulltd {
    padding: 0em 0em 0em 0em;
}

/* Make the <a> fill the whole td */
td a.fulltd {
    display: block;
    width: 100%;
    height: 100%;
}

/* Let the <div> provide the clickable cell-padding */
div.fulltd {
    height:100%;
    width:100%;
    padding: 1.0em 1.0em 1.0em 1.0em;
}

(Kudos to these commenters for helping me finally solve it! Per Lindberg, Max)