Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2005
    Location
    Nowhere.
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question How to make a whole TD a hyperlink without JavaScript?

    I have a table and some cells in it. I want to click anywhere in the cell and it to work like a hyperlink. But without JavaScript's events. How do I do such a thing?

  • #2
    New Coder
    Join Date
    Jan 2005
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can make a table active like
    Code:
    <a href="#"><table><tr><td>&nbsp;</td></tr></table></a>
    . So now you can put such a table in a tablecell. It's not very nice coding, but it works.

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    The Netherlands, Baarn, Ut.
    Posts
    4,252
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Wrong!

    Very bad coding, actually; an a element isn't supposed to contain anything but inline content, which rules out a complete table instantly.

    Without a look at the actual markup and styles it remains guesswork, but if you have a link inside a table cell, you can make it display as a block level element with a style rule so it fills up the table cell, making it "hot" from side to side and top to bottom.
    If you want to have multiple cells link to the same place however, you either need multiple links or you're stuck with script.

    For more detail, more information is required.
    Regards,
    Ronald.
    ronaldvanderwijden.com

  • #4
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,743
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there ze0nyx,

    I believe that you require something like this example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>javascript free td link</title>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
    
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background:#fef;
     }
    #container {
         width:415px;
         margin:50px auto;
     }
    #tbl {
          border:solid 1px #666;
          background:#fff;
     }
    .cell {
         width:200px;
         height:50px;
         border:solid 1px #666;
     }
    a.goog {
         display:block;
         width:200px;
         height:50px;
         background:#99c;
         text-align:center;
         text-decoration:none;
         padding-top:5px;
         font-family:arial;
         font-size:16px;
         color:#669;
     }
    a.goog:hover {
         background:#669;
         color:#99c;
     }
    /*//]]>*/
    </style>
    
    </head>
    <body>
    
    <div id="container">
    <table id="tbl"><tr>
    <td class="cell">
    <a class="goog"href="http://www.google.com"> click the whole cell for google</a>
    </td>
    <td class="cell">
    <a class="goog"href="http://www.google.com"> click the whole cell for google</a>
    </td>
    </tr><tr>
    <td class="cell">
    <a class="goog"href="http://www.google.com"> click the whole cell for google</a>
    </td>
    <td class="cell">
    <a class="goog"href="http://www.google.com"> click the whole cell for google</a>
    </td>
    </tr></table>
    </div>
    
    </body>
    </html>
    coothead

  • #5
    New Coder
    Join Date
    Feb 2005
    Location
    Nowhere.
    Posts
    24
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you, coothead. The only thing I had to do was to set the width property of the link to 100% .


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •