KPC
Kevin Powell - Community•9mo ago
NOcanoa

Is it possible to add links to a table?

i am trying so when i click a row it will link to a spesific page? 
<table>
    <thead>
        <tr> 
            <th>number</th>
            <th>1title</th>
            <th>desciptiom</th>
        </tr>
    </thead>
    <tbody>
        <tr><!-- so if i click any off these it will go to url/topic1 -->
            <th>1</th>
            <th>blabla</th>
            <th>sdfgzdlgd xd j</th>
        </tr>
        <tr><!-- so if i click any off these it will go to url/topic2 -->
            <th>2</th>
            <th>blabla</th>
            <th>sdfgzdlgd xd j</th>
        </tr>
        <tr> <!-- so if i click any off these it will go to url/topic3 -->
            <th>2</th>
            <th>blabla</th>
            <th>sdfgzdlgd xd j</th>
        </tr>
    </tbody>
</table>
<table>
    <thead>
        <tr> 
            <th>number</th>
            <th>1title</th>
            <th>desciptiom</th>
        </tr>
    </thead>
    <tbody>
        <tr><!-- so if i click any off these it will go to url/topic1 -->
            <th>1</th>
            <th>blabla</th>
            <th>sdfgzdlgd xd j</th>
        </tr>
        <tr><!-- so if i click any off these it will go to url/topic2 -->
            <th>2</th>
            <th>blabla</th>
            <th>sdfgzdlgd xd j</th>
        </tr>
        <tr> <!-- so if i click any off these it will go to url/topic3 -->
            <th>2</th>
            <th>blabla</th>
            <th>sdfgzdlgd xd j</th>
        </tr>
    </tbody>
</table>
7 Replies
Chris Bolson
Chris Bolson•9mo ago
yes, with JavaScript
Jochem
Jochem•9mo ago
you could add a link to every cell, and then scale the links to fill the cells, but it's a lot of extra markup and any borders or gaps between the cells wouldn't be clickable you can't wrap a tr in a link directly, or a td* for that matter you're also using th wrong here, th is tableheader, you should be using td for cells inside of tbody the easiest way would be to set a click handler on the tbody though. You can then add a data attribute to each TR and use the delegation pattern to redirect people to the right page when they click. It's best to still have an anchor tag, probably on the first item, for accessibility reasons yeah, and inside thead you use th for cells. You're using th for cells in the tbody though inside tbody, you have to use td for cells
ἔρως
ἔρως•9mo ago
I DID IT! im preparing a demo https://jsfiddle.net/8wnh1yk0/1/ the idea is to have the link on the first <td> the <tr> has position: relative while the link has position: absolute when you set the top, bottom, left and right to 0, it will stretch the element to take the entire size of the position: relative parent and with a little bit of css, you can even have a :hover that works you don't need any javascript or other hacky solutions by the way - tab navigation works!
Jochem
Jochem•9mo ago
I don't know why I hate it. It's a perfectly good solution. I'm pretty sure it's very accessible too, multiple links to the same thing isn't a good solution for accessibility. It feels so cursed though.
ἔρως
ἔρως•9mo ago
because it is cursed
Jochem
Jochem•9mo ago
The only issue is that you can't select text on any of the fields, I think?
ἔρως
ἔρως•9mo ago
you can't but it's a link you would struggle with it anyways there's a solution for that as well: the table can be printed into pdf that way, the text is selectable, but it is a hack i had to do something similar at work, so, i decided to share it you're welcome what i wrote should be working in pure css as well

Did you find this page helpful?