如何使整个表格成为一个按钮/到另一个HTML页面的链接？

Question

I have this table, that should be a button that link to another page. The reason is that the values of the table should be changeable with data from a database. The parameter can be changes to pH for example and the Value to 7 or something. But the table/button shall link to the same page. Where it is possible to set the Target.

So far this i what i got:

<table class="Button" >
    <tr>
        <td class="parameter"> Temperature</td>
    </tr>

    <tr>
        <td class="Value">23&#x2103</td>    
    </tr>

    <tr>
        <td class="Target">Target: 30&#x2103 </td>
    </tr>
</table>

So how do i make it a link/button?

Answer 1

The same way as anything else.

You put an <a> element (with an href attribute) around it.

Answer 2

You can use onclick and redirect your page.

Or wrap your table with <a>

 <table class="Button" onclick="location.href='yourpage.html'" > <tr> <td class="parameter"> Temperature</td> </tr> <tr> <td class="Value">23&#x2103</td> </tr> <tr> <td class="Target">Target: 30&#x2103 </td> </tr> </table> 

Answer 3

Wrap it into a link element:

<a href="LINK.html">
    <table>
        <tr>
            <td class="parameter"> Temperature</td>
        </tr>
        <tr>
            <td class="Value">23&#x2103</td>    
        </tr>
        <tr>
            <td class="Target">Target: 30&#x2103 </td>
        </tr>
    </table>
</a>

And if you wanna have a button, add a button element to that:

<button style="color:black; background-color:white; border-radius:5px;">
    <a href="LINK.html">
        <table>
            <tr>
                <td class="parameter"> Temperature</td>
            </tr>
            <tr>
                <td class="Value">23&#x2103</td>    
            </tr>
            <tr>
                <td class="Target">Target: 30&#x2103 </td>
            </tr>
        </table>
    </a>
</button>

Answer 4

You can do it using javascript onClick event or put <a> tag around it

Html

 <table class="button" onClick="linkTo('https://www.google.com')">
    .
    .
    .
 </table>

Java Script

<script>
       function linkTo(var link){
         window.location = link;
       }

</script>

Css for mouse point

<style>
 table.button{
     cursor: pointer;
  }
</style>