How could I distribute CSS properties like A:hover and such into these links? Where would I put a class, or a div? Also, I have them all inside a table but I want to adjust where the text is inside the table, how could I adjust the text positioning in each cell?

<table border="0" cellpadding="0" cellspacing="0" width="900" height="50" class="topnav" background="navbarbg.jpg">
<tr>
<td align="center">
<a href="www.Google.com">Home </a>
</td>
<td align="center">
<a href="www.yahoo.com">Web Hosting </a>
</td>
<td align="center">
<a href="www.dogpile.com">Login </a>
</td>
<td align="center">
<a href="www.wikipedia.com">Order Now </a>
</td>
<td align="center">
<a href="www.buy.com">Support </a>
</td>
<td align="center">
<a href="www.ebay.com">Contact Us </a>
</td>
</tr>

add http:// in front of www

Your best bet would be to remove the tables and add div tags:
then you could position the text much easier. You create a main div for example called links:

<div class="links">
<div class="color_for_link" align="left"><a href="http://www.yahoo.com">Web Hosting </a></div>
<div class="color_for_link_two" align="right"><a href="http://www.dogpile.com">Login</a></div></div> etc,etc


then add your css styles to your css page.
.links {
border: 1px solid #BABABA;
width: whatever-px;
margin: 0px 0px 0px 0px; (here is where you position your links)
padding: 0px 0px 0px 0px; (here is where you position your links)
background-color: #whatevercoloryouwant;
background-repeat: no-repeat;
}
.color_for_link {
font-family: Arial;
font-size: 14px;
color: #putyourcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link a:link {
font-family: Arial;
font-size: 14px;
color: #putyourcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link a:hover {
font-family: Arial;
font-size: 14px;
color: #putyourhovercolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link a:visited {
font-family: Arial;
font-size: 14px;
color: #putyourvisitedcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link a:active {
font-family: Arial;
font-size: 14px;
color: #putyourcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link_two {
font-family: Arial;
font-size: 14px;
color: #putyourcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link_two a:link {
font-family: Arial;
font-size: 14px;
color: #putyourcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link_two a:hover {
font-family: Arial;
font-size: 14px;
color: #putyourhovercolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link_two a:visited {
font-family: Arial;
font-size: 14px;
color: #putyourvisitedcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}
.color_for_link_two a:active {
font-family: Arial;
font-size: 14px;
color: #putyourcolorhere;
padding: 0px 0px 0px 0px
margin: 0px 0px 0px 0px;
}

When I do this, it works in firefox but not in IE. Why is that? :(

CSS

td.page
{ vertical-align: bottom;
....
}

HTML:

<td class="page">Text</td>