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?

Add Comment
2 Answer(s)

Yes, you can do that by setting ids 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>

Add Comment

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.

Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.