CODEWITHSUNDEEP
htmlcss
Sierra
Sierra

Reputation: 15

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?

Upvotes: 0

Views: 69

Answers (2)

D. Pardal
D. Pardal

Reputation: 6597

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>

Upvotes: 1

Adam Neuwirth
Adam Neuwirth

Reputation: 537

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.

Upvotes: 0

Related Questions