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>

16 Replies

Chris Bolson•4mo ago

yes, with JavaScript

NOcanoaOP•4mo ago

is there no way not to use js?

Jochem•4mo 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

NOcanoaOP•4mo ago

yeah found that out xD

Jochem•4mo ago

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

NOcanoaOP•4mo ago

is the <thead> not a thing?

Jochem•4mo ago

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

ἔρως•4mo 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•4mo 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.

ἔρως•4mo ago

because it is cursed

Jochem•4mo ago

The only issue is that you can't select text on any of the fields, I think?

ἔρως•4mo 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

NOcanoaOP•4mo ago

daam thats an interesting way

ἔρως•4mo ago

i had to do something similar at work, so, i decided to share it

NOcanoaOP•4mo ago

thanks, its working for me also, had to use an online converter scss to css xD

ἔρως•4mo ago

you're welcome what i wrote should be working in pure css as well

Gaming

Programming

Is it possible to add links to a table?