Add four social buttons over an image

I have a table with three images, its codes are:

<tr>
<td><a href="/"><IMG SRC="images/bannerlogo.jpg" alt="logo" width="250" height="57" border="0"></a></td>
<td rowspan="2"><IMG SRC="images/bannermid.jpg" alt="Header" width="249" height="113"></td>
<td rowspan="2"><img src="images/bannerright.jpg" alt="Header" width="250" height="113">
</td>
</tr>

Now I want to put four social buttons over the third image, that is images/bannerright.jpg, so I try to rewrite by using div tag to add a small table(one row and four columns, each columns for a social button):

<tr>
<td><a href="/"><IMG SRC="images/bannerlogo.jpg" alt="logo" width="250" height="57" border="0"></a></td>
<td rowspan="2"><IMG SRC="images/bannermid.jpg" alt="Header" width="249" height="113"></td>
<td rowspan="2">
<div style="position:relative;">
<img src="images/bannerright.jpg" alt="Header" width="250" height="113">
<div style="width:200px; height:200px; position:absolute; top:10px; left:10px;">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</div>
</div>
</td>

</tr>

but this totally distort the layout at all. What is the problem with my codes?