Social share buttons with on same line and equal margin

Hi guys,

I followed the steps in this post:
http://wordpress.org/support/topic/buttons-on-same-line-in-single-post?replies=5
and I got the buttons to display on the same line. There are however a problem with the top/bottom margin as the buttons are not on the same center line.

her is one of my post with this issue:
http://enkiiebooks.com/tilfort-effekt/

Hope you can help me adjust the top/bottom margin.

This is the code I have embedded into the post:

<table>
<tbody>
<tr>
<td><a class="twitter-share-button" href="https://twitter.com/share">Tweet</a>
<script>// <![CDATA[
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
// ]]></script></td>
<td><iframe style="border: none; overflow: hidden; height: 21px;" src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fmensonlinestyleguide.com&width&layout=button_count&action=like&show_faces=true&share=false&height=21" width="100" height="21" frameborder="0" scrolling="no"></iframe></td>
<td>
<div class="g-plus" data-action="share" data-annotation="bubble"></div>
<script>// <![CDATA[
(function() {
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
    po.src = 'https://apis.google.com/js/platform.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
  })();
// ]]></script></td>
<td><script>// <![CDATA[
(function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
// ]]></script></td>
<td><a style="display: inline-block; text-indent: -9999px; overflow: hidden; width: 61px; height: 20px; background: url('http://platform.tumblr.com/v1/share_2.png') top left no-repeat transparent;" title="Share on Tumblr" href="http://www.tumblr.com/share">Share on Tumblr</a></td>
<td><su:badge layout="1"></su:badge>
<script type="text/javascript">
  (function() {
    var li = document.createElement('script'); li.type = 'text/javascript'; li.async = true;
    li.src = ('https:' == document.location.protocol ? 'https:' : 'http:') + '//platform.stumbleupon.com/1/widgets.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(li, s);
  })();
</script>
</td>
</tr>
</tbody>
</table>

Hope you can help me.

Best regards
Vegard