The links and buttons are stacking up and I need space between them. Please help me fix this.
[HTML]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="PN.css" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8; image/jpeg" />
<title></title>
</head>
<body>
<div class="all">
<p id="titleleft"></p>
<div class="navigation">
<div id="navback">
<p></p>
</div>
<table>
<tr>
<td id="r1" class="menu"><a href="http://www.htmldog.com" class="links1">Home</a></td>
</tr>
<tr>
<td id="r2" class="menu"><a href="http://www.htmldog.com" class="links1">Reviews</a></td>
</tr>
<tr>
<td id="r3" class="menu"><a href="http://www.htmldog.com" class="links1">Events</a></td>
</tr>
<tr>
<td id="r4" class="menu"><a href="http://www.htmldog.com" class="links1">Movies</a></td>
</tr>
<tr>
<td id="r5" class="menu"><a href="http://www.htmldog.com" class="links1">Games</a></td>
</tr>
<tr>
<td id="r6" class="menu"><a href="http://www.htmldog.com" class="links1">Music</a></td>
</tr>
<tr>
<td id="r7" class="menu"><a href="http://www.htmldog.com" class="links1">Contact Us</a></td>
</tr>
<tr>
<td id="r8" class="menu"><a href="http://www.htmldog.com" class="links1">About O.R.</a></td>
</tr>
</table>
</div>
</body>
</html>
[/HTML]
[HTML]
body{background-color: black;}
.all{width: 800px; height: 800px;}
#titleleft{z-index: -1; background-image: url(honeycomb.png); position: absolute; top: -8%; left: -8%; height: 400px; width: 500px;}
.navigation{position: absolute; top: 240px; width: 120px; height: 350px;background-color: #8b8b8b; padding: 2px; border: 1px white solid;}
.menu{}
.links1{ position: absolute; width: 105px; height: 20px;text-decoration: none; color: black; background-color: #eed821; text-decoration: none; font: bold .8em/1.1 arial; padding: 2px; overflow: auto; border: solid;}
.links1:hover{color: #eed821; background-color: black;}
[/HTML]