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 9 of 9
  1. #1
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Make entire <td> a link

    I want to make some cells of a table into links; the entire area of the table cell should be clickable. Currently, only the text portion of the cell is clickable, and usually this won't fill the entire cell. How do I do this?

    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" xml:lang="en">
    <style type="text/css">
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid #000;
        padding: 0;
    }
    a {
        display: block;
        height: 100%;
        width: 100%;
    }    
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><a href="#">Link 1</a></td>
            <td rowspan="2"><a href="#">Link 2</a></td>
        </tr>
        <tr>
            <td><a href="#">Link 3</a></td>
        </tr>
    </table>
    </body>
    </html>

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello error792,
    I don't know about tables, do you know tables are not for layout?
    Here is a demo that shows a couple ul menus that have clickable areas larger than the text. http://nopeople.com/CSS/ulmenu/index.html -View the source to see how it's done.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    no idea why you want to do this but ok

    <table name="badger" onclick="window.location.href='http://www.google.com'">
    <tr>
    <td class="row1" width="100%" style="cursor:hand; padding: 30px; border: 1px solid black;" >&nbsp;</td>
    </t>
    </table>

    there ya go

  • #4
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Yes, I know tables are not for layout. I'm using it for a schedule, which is certainly tabular data.

    The cells need to link to different things, so attaching an event to the entire table won't work either. I might be able to attach events to each table cell, but it would be much cleaner to use <a>'s; it seems simple enough that it ought to be possible.

  • #5
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    sorry the edit didnt work

    onclick="window.location.href='http://www.google.com'

    you need that function in your td

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Quote Originally Posted by error792 View Post
    Yes, I know tables are not for layout. I'm using it for a schedule, which is certainly tabular data.

    The cells need to link to different things, so attaching an event to the entire table won't work either. I might be able to attach events to each table cell, but it would be much cleaner to use <a>'s; it seems simple enough that it ought to be possible.
    sparkbox: hand is not valid value for the CSS cursor property. It must read cursor: pointer.

    error792: If you’re going for the HTML link inside table cells (and the links are the only elements in these cells) then it might help to make the anchors display as block element (display: block). You can then also assign a height if you want.

  • #7
    New Coder
    Join Date
    Dec 2009
    Location
    Sleaford, LINCOLNSHIRE
    Posts
    58
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by VIPStephan View Post
    sparkbox: hand is not valid value for the CSS
    i know, hense why i reposted the correct section of code later

  • #8
    New Coder
    Join Date
    Jun 2006
    Posts
    21
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by VIPStephan View Post
    error792: If you’re going for the HTML link inside table cells (and the links are the only elements in these cells) then it might help to make the anchors display as block element (display: block). You can then also assign a height if you want.
    I did this, it doesn't work.
    Quote Originally Posted by error792 View Post
    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" xml:lang="en">
    <style type="text/css">
    table {
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid #000;
        padding: 0;
    }
    a {
        display: block;
        height: 100%;
        width: 100%;
    }    
    </style>
    </head>
    <body>
    <table>
        <tr>
            <td><a href="#">Link 1</a></td>
            <td rowspan="2"><a href="#">Link 2</a></td>
        </tr>
        <tr>
            <td><a href="#">Link 3</a></td>
        </tr>
    </table>
    </body>
    </html>

  • #9
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,624
    Thanks
    6
    Thanked 1,001 Times in 974 Posts
    Block elements have a width that is filling their parent (i. e. 100%) by default. However, you can’t have a percent height since this relates to the parent element’s height. If that one isn’t set then height 100% doesn’t work either. And as far as I remember table cells are somewhat special in that even when you specify a height the direct child won’t use that. So you probably need an absolute size in pixels or ems.


  •  

    Posting Permissions

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