Centre a button in between two table rows

Question

i am not even sure if this is possible, but is it possible to place a button in the centre of two table rows. For example i have the following table:

/*MAIN CONTAINER*/
div#products_box{
    padding: 0;
    margin: 0;
    width: 70%;
    margin: auto;
    border: 2px solid #cccccb;
    height: 130px;
    border-top: 6px solid #ed1c24;
    margin-top: 100px;
    margin-bottom: 30px;


}

/*div#products{
    padding-left: 20px;
    padding-right: 20px;
}*/


button#feed{
    text-transform: uppercase;
    color:#e86065;
    background-color: white;
    border: 1px solid #e86065;
    border-radius: 5px;
    float:right;
    padding-right: 10px;
width: 150px;
    font-size: 1.5em;
}

/*TABLE*/

table{
    width:100%;
    margin-top: 6px;
    border-collapse: collapse; /* no border */
    margin-bottom: 10px;
}

td.avg{
    text-align: center;
}

/*products button*/
td#button{
    margin-top: 20px !important;
    height: 50px;
}

h3#rest_name{
    color: #e86065;
    font-weight: bold;
    font-size: 1.2em;
    margin-left: 20px;
}

p#addr{
    padding:0;
    margin: 0;
    font-size: 0.9em;
    color: #818284;
    margin-left: 20px;
    margin-bottom: 20px;
}

p.title{
    text-transform: uppercase;
    color: #000;
    font-size: 0.7em;
    font-weight: bold;
}

p.rest{
    font-size: 0.8em;
    color: #818284;
    margin-bottom: 20px;
}

td#review{
    float:left;    
}


/*Red bottom border*/

tr#bottom,th{
    padding: 0;
    margin: 0;
    background: #e86065;
    width: 100%;
    border: 1px solid #e86065;
    height: 40px;

}

/*review button*/
button#review_butt{
    float:left;
    color: white;
    text-transform: uppercase;
    background-color:#e86065;
    border: 1px solid #e86065;
    font-size: 0.8em;
}

tr.float{
    margin-left: 20px;    
}

td.float{
    margin-left: 20px;
}

<div id='products_box'>            
  <div id='products'>
  
<table>
  <tr class='float'>
    <td class='float'><h3 id='rest_name'>$rest_name </h3> </td>
    <td class='float'><p class='title'> Price</p></td>
    <td class='avg'><p class='title'>Avg Delivery</p></td>
    <td><p class='title'>Cost</p></td>
    <td></td>
    <td id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>
</tr>
<tr class='float'>
<td><p id='addr'>$rest_add,&nbsp;$rest_city</p></td>
<td></td>
<td class='avg'><p class='rest'>$rest_avg mins</p></td>
<td></td>
  </tr>
   <div id='cuisine'>
   <br>
  <tr id='bottom'>
  <td id='review'><a href='review.php'><button id='review_butt'>View Reviews!</button></a></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td><img src='Images/Chef_hat.png' alt='Cuisine' style='width:40px;height:40px;'></td>
  <td>$rest_cat</td>
      </tr>
</div>
</table>

            
            
               
        </div>
        </div>

But i would like the "FEED ME!" button to be centred in the middle of the table rows like so:

Is this too far fetched or can it work?

Answer 1

try:

<td rowspan="2" id='button'><a href='product_page.php'><button id='feed'>Feed Me!</button></a></td>

This tells the browser that this cell spans two rows. just make sure the next <tr> is short of one <td> at the end.