Fix footer table/div issue - html

Question

I'm trying to align three small logos in a footer widget in a single line (using Wordpress, theme is Press coders) I've created a mock up of what I want at:
Image
However everything is skewing beyond belief!
You can see the mess in my footer at:
www.oxfordlifestylecentre.co.uk
I've tried using both a div and a table, my latest table looks like:
<table align="right">
<tr>
<td>
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" />
</td>
<td>
<a href="/hair-and-beauty/>
<img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" />
</td>
</tr>
</table>

Answer 1

You html syntax is wrong. You are missing closing anchors and quotation marks. Try this.
<table align="right">
<tr>
<td>
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg" alt="Health and Fitness" /></a>
</td>
<td>
<a href="/hair-and-beauty/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp- content/uploads/2014/07/hair-and-beauty-1.jpg" alt="Hair and Beauty" /></a>
</td>
</tr>
</table>

Answer 2

Try this, Fiddle
<div class="logos">
<a href="/gym/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-logo.jpg" alt="Health and Fitness" />
</a>
<a href="/hair-and-beauty/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-logo.jpg" alt="Hair and Beauty" />
</a>
<a href="/nutrition-and-refreshment/">
<img src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/nutrition-and-refreshment.jpg" alt="Nutrition and Refreshment" />
</a>
</div>
.logos {
float: right;
clear: right;
width: 500px;
height: 50px;
}
.logos img {
height: 80%;
}
.logos a {
text-decoration: none;
}
*Note: For the best effects resize images to same size.

Answer 3

As pointed out by previous answers, your HTML syntax is wrong. However, using tables for that is not the correct approach. You can simply keep the links and images inline and text-align right.
It depends on the complexity of the layout, but display:inline-block may be needed or you might need to wrap certain elements in a container. Either approach is superior to using tables for layout (Why not use tables for layout in HTML?)
HTML
<img src="http://placekitten.com/g/200/300" /><img src="http://placekitten.com/g/200/300" /><img src="http://placekitten.com/g/200/300" />
CSS
body {
text-align: right;
}
a {
margin-right: 10px;
}
http://jsbin.com/wuvoriye/1/edit

Answer 4

Ok so where to start:
1: dont use a table.
2: dont use a table.
3: you get the picture here....
Now for the fix:
I have left comments into it for you so to explain what I did.
I put in inline style for you so just add it to your css file.
<section class="footer-widget-container">
<div id="footer-widget-area" class="inside widget-area">
<!-- Social Media Div First -->
<div id="pc_info_widget_designfolio-pro-3" class="widget pc_info_widget" style="width: 40%; float: left;">
<!-- simple p tag with a class is all that needed -->
<p class="phone" style="margin: 0; padding: 0;">
[phone]
</p>
<!-- keep it simple: list items floated left + you can now just add as many as you want -->
<ul style="float: left; margin: 0; padding: 0;">
<li style="float: left; list-style: none;">
<a class="sm-icon" target="_blank" href="http://www.facebook.com//lifestyle-center">
<img width="32" height="32" alt="Facebook" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/facebook.png">
</a>
</li>
<li style="float: left; list-style: none;">
<a class="sm-icon" target="_blank" href="http://twitter.com//lifestylecentre">
<img width="32" height="32" alt="Twitter" src="http://www.oxfordlifestylecentre.co.uk/wp-content/themes/designfolio-pro/images/twitter.png">
</a>
</li>
</ul>
</div>
<!-- Logo Div Second -->
<div id="text-8" class="widget widget_text" style="width: 60%; float: left;">
<div class="textwidget">
<!-- Dont use tables unless its table data | Simple ul list itmes float left again -->
<ul style="float: right;">
<li style="float: left; list-style: none;">
<a href="/gym/">
<img alt="Health and Fitness" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/health-and-fitness-1.jpg">
</a>
</li>
<li style="float: left; list-style: none;">
<a href="/hair-and-beauty/">
<img alt="Hair and Beauty" src="http://www.oxfordlifestylecentre.co.uk/wp-content/uploads/2014/07/hair-and-beauty-1.jpg">
</a>
</li>
</ul>
</div>
</div>
</div>
</section>