Centre a button in between two table rows - html

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, $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.