How to align table row to the right with css? - css

Question

I'm trying to move a table row containing navigation links for my website from being left aligned to being right aligned, but no matter what I edit nothing moves. I've only recently started learning HTML and CSS so any help would be appreciated.
HTML
<div id="nav">
<table>
<tr>
<td>
<a href="index.html">
<img src="Images/Home.png"/>
</a>
</td>
<td>
<a href="Learn.html">
<img src="Images/Learn.png"/>
</a>
</td>
<td>
<a href="Practice.html">
<img src="Images/Practice.png"/>
</a>
</td>
<td>
<a href="About.html">
<img src="Images/About.png"/>
</a>
</td>
<td align="right">
Donate
</td>
</tr>
</table>
</div>
CSS
#nav {
width: 100%;
height: 10%;
float: right;
background-color: #47B531;
margin: 0px;
padding:0px;
white-space: nowrap;
}
#nav tr {
margin: 0px;
padding: 0px;
width: 100%;
}
#nav td {
font-size: 18px;
margin: 0px;
padding: 5px;
text-align: right;
margin: 0px;
}
#nav img {
width: 30px;
height: 30px;
display: inline;
padding: 5px;
margin: 0px;
}

Answer 1

Please use
<table align="right">
instead of just table tag.

Answer 2

Usually, the navigation menues are designed using lists instead of tables. Here a very very simple example:
HTML:
<div id="nav">
<ul>
<li>
<img src="Images/Home.png"/>
</li>
<li>
<img src="Images/About.png"/>
</li>
<li>
<img src="Images/Contact.png"/>
</li>
<li>
Donate
</li>
</ul>
</div>
CSS:
#nav ul {
list-style: none;
}
#nav ul li{
float:right;
margin-left: 10px;
}
The options using this method is endless, give it a try and let us know if you got stuck or have questions about it.
Heres the Fiddle: http://jsfiddle.net/Q5Vh3/

Answer 3

If you mean that you want the links on the right, within the div element, without changing the table cell rendering from the current one, just add the rule
#nav table { float: right; }

Answer 4

Use #Dave's suggestion next time. Lists are much more efficient and easier. But to answer your question you can use align=right on the table to fix it.
Look at this fiddle http://jsfiddle.net/uhLuh/

Answer 5

Awareness of current web standards is crucial. I recommend diving head into HTML 5 & CSS3.
I believe that you should be looking to follow HTML 5 standards with CSS3.
Here is how to ideally approach a HTML5 navigation element and the base CSS3 elements and attributes that should get you pointed in the right direction :)
HTML5
<nav>
<img src="Images/Home.png"/>
<img src="Images/Home.png"/>
<img src="Images/Home.png"/>
<img src="Images/Home.png"/>
</nav>
CSS3
ul { }
nav ul
{float: right; *Adjust to suit
text-align:right; *Adjust to suit
list-style: none;} *Adjust to suit
nav ul li { }
nav ul a { }
Hope this helps you!