Is there a way to make a link that goes to a row/cell from a table?
I need to have a word that when clicked (like a link) it will go to a specific row on a table, all on the same page. I have a table with this format:
<div id="table1"> <table width='100%' id = 'table1'> <tr> <th><b>Coluna1:</b></th> <th><b>Coluna2:</b></th> </tr> <tr> <td>Word1</td> <td>Text1</td> </tr> <tr> <td>Word2</td> <td>Text2</td> </tr> <tr> <td>Word3</td> <td>Word3</td> </tr> </table>
How can I do this?
Yes, you can do that by setting id
s for each row/cell you want to go to and linking to #<id>
.
@keyframes highlight { from { background-color: yellow; } to { background-color: #0000; } } :target { animation: highlight 1s linear; }
<p>Go to</p> <ul> <li><a href="#word1">Word1</a></li> <li><a href="#text1">Text1</a></li> <li><a href="#row1">Row1</a></li> <li><a href="#text2">Text2</a></li> </ul> <table width='100%' id ="table1"> <tr> <th><b>Coluna1:</b></th> <th><b>Coluna2:</b></th> </tr> <tr id="row1"> <td id="word1">Word1</td> <td id="text1">Text1</td> </tr> <tr id="row2"> <td id="word2">Word2</td> <td id="text2">Text2</td> </tr> <tr> <td>Word3</td> <td>Word3</td> </tr> </table>
You can use anchor links. For example:
<div id="table1"> <table width='100%' id = 'table1'> <tr> <th><b>Coluna1:</b></th> <th><b>Coluna2:</b></th> </tr> <tr> <td><a href='#word1'>Word1</a></td> <td>Text1</td> </tr> <tr> <td><a href='#word2'>Word2</a></td> <td>Text2</td> </tr> <tr> <td><a href='#word3'>Word3</a></td> <td>Word3</td> </tr> </table>
And then link to your page like: https://www.example.com/index.html#word1
Replace what comes after the "#" character with whatever anchor tag you want to link to.