How can I get my website icons in the same row? (HTML)?

[Ace Kevlar]

I'm building a website but I'm a total novice. I am looking to use integrated buttons from places like facebook and twitter in the footer of my website, but I'm trying to get them all on the same line in a row. Unfortunately, when I copy the code into the footer, this is what I get:

https://dl.dropbox.com/u/2268811/Footer.jpg

They're all on top of each other by default. I need to be able to find a way to get them all in a row. Any ideas? I did try putting them in tables which actually worked, but I removed it for two reasons: (1) apparently tables are a poor coding choice for some reason and (2) I couldn't get them left justified, they were all centered.

Do I need to make changes in the css file or the footer file? Or both? How can I keep it from breaking my site?

Anyway, any html/coding help would be appreciated. Please be clear, as I'm a dummy. Lol.