Table row with link

Question

How do I get links in each row of my table, for example, I want it to be similar to the emails of Gmail, Hotmail etc., which has several lines and when you click on a specific one, open the full referent email. I tried that way, but it didn’t work:

<table class="table table-hover table-dark">
  <thead>
    <tr>
     <th>Marca</th>
     <th>Modelo</th>			  
    </tr>
  </thead>
  <tbody>
    <tr href="detalhe1.php">
      <td>Fitch</td>
      <td>4561A</td>
    </tr>
    <tr href="detalhe2.php">
      <td>Abercrombie</td>
      <td>CV591A</td>
    </tr>
  </tbody>
</table>

You can do it with pure HTML?

Answer 1

The attribute href is only applicable to some tags (a, area, base, link), therefore has no effect on tag tr.

You can do it with pure HTML?

What you can do is use the attribute onclick and redirect with location.href for the desired page, but it is not pure HTML, because the value of the attribute onclick already involves a Javascript code (in this case, the location.href).

You can even use a CSS to change the cursor so that the table row behaves as a clickable area:

table.table tr{
  cursor: pointer;
}

<table class="table table-hover table-dark">
<thead>
<tr>
<th>Marca</th>
<th>Modelo</th>			  
</tr>
</thead>
<tbody>
<tr onclick="location.href='detalhe1.php'">
<td>Fitch</td>
<td>4561A</td>
</tr>
<tr onclick="location.href='detalhe2.php'">
<td>Abercrombie</td>
<td>CV591A</td>
</tr>
</tbody>
</table>