Controls not aligning properly.
- by RPK
I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
First Website
</title>
</head>
<body>
<table id="main" align="center" width="600 px">
<tr id="trBanner">
<td id="tdBanner">
<img src="../../../My Pictures/banner copy.bmp.jpg"
</td>
</tr>
<tr id="trNavLinks">
<td id="lnkHome">
<a href="" id="lnkHome" name="lnkHome">Home</a>
</td>
<td id="lnkLife">
<a href="" id="lnkLife" name="lnkLife">Life</a>
</td>
<td id="lnkTeachings">
<a href="" id="lnkTeachings" name="lnkTeachings">Teachings</a>
</td>
<td id="lnkExperiences">
<a href="" id="lnkExperiences" name="lnkExperiences">Experiences</a>
</td>
<td id="lnkPhotoGallery">
<a href="" id="lnkPhotoGallery" name="lnkPhotoGallery">Photo Gallery</a>
</td>
<td id="lnkReach">
<a href="" id="lnkReach" name="lnkReach">How to Reach</a>
</td>
<td id="lnkContact">
<a href="" id="lnkContact" name="lnkContact">Contact Us</a>
</td>
</tr>
</table>
</body>
</html>