<table width="300" border="1" align="center" >
     <tr>
     <td>Первая</td>
     <td>Вторая</td>
     </tr>
     <tr>
     <td>Третья</td>
     <td>Четвертая</td>
    </tr>
   </table>

<div id="social_buttons">
<ul>
<li>код кнопки 1</li>
<li>код кнопки 2</li>
<li>код кнопки 3</li>
<li>код кнопки 4</li>
</ul>
</div><!--social_buttons-->
  
  
<style>
#social_buttons ul {
    width: 404px;
    height: auto;
}

#social_buttons ul li {
    list-style-type: none;
    width: 200px;
        height: auto;
    float: left;
    border: 1px solid #000000;
}
</style>

<table id="social">
<tr>
<td class="first"><img src="mail.png"/></td>
<td class="second"><img src="ww.png"/></td>
</tr>
<tr>
<td class="first"><img src="fb.png"/></td>
<td class="second"><img src="vk.png"/></td>
</tr>
</table>  
  
<style>
#social {
    width: 242px;
    height: auto;
    border: none;
}

.first {
    width: 110px;
    height: auto;
}

.second {
    width: 132px;
    height: auto;
}
</style>