So I'm having trouble getting my table where I want it and getting the cells to keep the shape I want, could someone assist me? I'm trying to get a table to stay on the top-right of a div, on top of everything else. Also, I'm trying to keep its cells in a specific size. Neither of these are working properly for me.
My HTML and CSS are here:
HTML
Code:
	<div class="page">
		<div class="header">
			<table class="header">
			<tr class="header">
				<td class="header" />
				<td class="header"><img src="./images/masthead_pic_1.gif" alt = "" height="77" width="78" /></td>
			</tr>
			<tr class="header">
				<td class="header"><img src="./images/masthead_pic_2.gif" alt = "" height="78" width="78"/></td>
				<td class="link"><a class="header" href="#about"> About Us </a></td>
			</tr>
			<tr class="header">
				<td class="header" />
				<td class="header">
					<img src="./images/masthead_teeth_top.gif" alt = ""/>
					<img class="header" src="./images/masthead_teeth_bot.gif" alt = ""/>
				</td>
			</tr>
			</table>
			<h2 class="header">Dr. Grave Digger<br /> &nbsp;&nbsp;Dr. Charles Senior</h2>
			<p class="header"> <b>Office</b>: Address in some location, City, State<br /> <b>Tel</b>: (123)-456-6789</p>
			<ul class="menu">
				<li><a class="menu" href="#home">Home</a></li>
				<li><a class="menu" href="#about">About Us</a></li>
				<li><a class="menu" href="#appl">Appliances</a></li>
				<li><a class="menu" href="#first">First</a></li>
				<li><a class="menu" href="#fun">Fun Zone</a></li>
				<li><a class="menu" href="#news">News</a></li>
				<li><a class="menu" href="#faq">FAQ</a></li>
				<li><a class="menu" href="#911">Problems &amp; Emergencies</a></li>
				<li><a class="menu" href="#tech">Technology</a></li>
			</ul>
		</div>
CSS
Code:
ul.menu {
	list-style-type:none;
	color:#336633;
	margin:0;
	padding:0;
	overflow:hidden;
}
li {
	float:left;
}
a.menu {
	font: bold 8pt "Arial";
	text-decoration:none;
	text-transform:none;
	padding:4px;
	background-color:#9CD3A3;
	text-align:center;
	display:block;
	height: 15px;
	/*padding: 5px 10px;*/
}

a:link.menu,a:visited.menu {
	color:#336633;
}

a:hover.menu,a:active.menu {
	color:black;
	/*font-style: oblique;*/
}
div.header {
	padding-left: 22px;
	background-color:#9CD3A3;
}

table.header {
	position:relative;
	left:500px;
	z-index:0;
	border: 0px;
	border-collapse:collapse;
	padding: 0px;
	margin: 0px;
	overflow:
}
a.header {
	text-decoration: none;
	z-index: 1;
}
tr.header {
	height: 78px;
}
td.header {
	border: 0px;
	padding: 0px;
	border-collapse:collapse;
	width: 78px;
	text-align:center;
}

td.link {
	background-color: #7accc8;
	width: 78px;
	height: 77px;
	text-align:center;
}
h2.header {
	font-weight: normal;
	font-size: 26pt;
	margin: 0px;
	padding-top: 30px;
	padding-left: 12px;
	z-index: 1;
}
p.header {
	font: normal 13px Arial;
	z-index: 1;
}