CSS doesn't seem to affect TD structure - html

Question

I'm coding a quick site for a school project and I'm extremely rusty hangs head in shame. I can't seem to get the width to affect the tags or center the text in them.
I have no idea why but if you could explain to me what I have to do to get the links on the nav bar centered and for the image to sit atop the loading text and act as a title. The loading should be centered btw but calc() doesn't like me ;~;
http://jsfiddle.net/MasterWhipper/6Z6z6/
<div id="navBar">
<table id="navText">
<tr>
<td><div class="navTd">Home</div></td>
<td width="396px">Loading</td>
<td><div class="navTd">Donate</div></td>
<td><div class="navTd">About Us</div></td>
</tr>
</table>
<img src="http://i.imgur.com/Y7OE90F.png" class="titleIMG"/>
</div>
Note: would it be easier to use a list for what I'm trying to do?

Answer 1

the best idea it is to use the HTML5 nav tag, it has been thought for navigations menu as yours:
<nav>
Home |
Loading |
Donate |
About us
</nav>
It is a solution that fits with your problem and plus it is the current standard! You will not have problem with CSS.
Here you are more info about HTML5 nav tag:
http://html5doctor.com/nav-element/

Answer 2

first things first...you don't need <div class="navTd"> inside a <td>
Assign everything to <td> and that would do.
Then, instead of using calc (its still not cross-browser), use display:inline-block; to allocate width to the td
#navText > td {
display:inline-block;
z-index: 3;
text-align: center;
}
working demo

Answer 3

Instead of using table structure use ul, li tags for navigation... You can easily style them :)
<div id="navBar">
<ul>
<li>Home</li>
<li>Loading</li>
<li>Donate</li>
<li>About Us</li>
</ul>
<img src="http://i.imgur.com/Y7OE90F.png" class="titleIMG"/>
</div>

Answer 4

Once again, people are professing their hatred of table. Don't worry about it.
Here, I made it work with tables. Three things I changed:
Set the table to table-layout: fixed;
Put your navTd class on the td, not the div. Otherwise you're telling the div to take a certain size of the td, not the td to take a certain size of the table
Removed the px to 396px. The width attribute does not use CSS syntax. You may want to use CSS for the width though, just to be more HTML5-zealous-friendly.
http://jsfiddle.net/6Z6z6/3/