How can I make a link from a td table cell

Question

I have the following    lt td gt    some text    lt div gt a div lt  div gt   lt  td gt    I d like to make the entire  lt td gt     lt  td gt  a hyperlink  I d prefer without the use of JavaScript   Is this possible

User · Answer

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.

User · Answer

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  lt td gt  to redirect to some other page

User · Answer

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

User · Answer

Yes  that s possible  albeit not literally the  lt td gt   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    lt td gt     lt a href  http   example com  gt       lt div style  height 100  width 100   gt        hello world      lt  div gt     lt  a gt   lt  td gt    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    lt table gt       lt tr gt           lt a href  http   example com  gt  lt td  width  200  gt hello world lt  td gt  lt  a gt       lt  tr gt   lt  table gt

User · Answer

This might be the most simple way to make a whole     lt td gt  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    lt td gt  lt a href    gt  lt div gt  lt br   gt  lt  div gt  lt  a gt  lt  td gt    Obviously the example just links to  this document   so fill in the    href    and replace the     lt br   gt  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     lt div gt  amp nbsp  lt  div gt  was the only thing left  remove the     lt div gt  lt  div gt  and it stops linking beyond the text  I didn t like the short     the     amp nbsp  displayed and found    a single  lt br   gt  works without an  extra line  penalty   If another     lt td gt  lt  td gt  in the     lt tr gt  has multiple lines  and makes the row taller with word-wrap for instance  then use multiple     lt br   gt  to bring the     lt td gt  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

User · Answer

Here is my solution    lt td gt      lt a href   yourURL  gt  lt  a gt      lt div class  item-container  gt         lt img class  icon  src   iconURL    gt         lt p class  name  gt           SomeText        lt  p gt      lt  div gt   lt  td gt     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

User · Answer

Use this code  It expands an  lt a gt  to fill the cell horizontally  To fill vertically  use the height property as well    x000D   x000D  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    x000D   lt table gt  lt tr gt  x000D     lt td gt  x000D       lt a href  http   example com  gt  x000D        Hello World x000D       lt  a gt  x000D     lt  td gt  x000D   lt  tr gt  lt  table gt  x000D   x000D   x000D

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

Examples related to html

Examples related to css

Examples related to hyperlink