PDA

Click to See Complete Forum and Search --> : Nested Table Problems

blank
05-15-2006, 01:35 PM
Hey guys, I'm new here, will look forward to posting here more often. I'm interested in ASP.Net, JavaScript and PHP, but my problem today has to do with neither of those, it's a lot more simpler I guess. I'm having problems with nested tables. In other words, although to me it seems as if it's correct, it sure doesn't look correct. Here is my source:

index.htm

<html>
<head>
<title>Jorge Peņa - Blank Denim</title>
<link href="index.css" rel=StyleSheet type="text/css" />
</head>
<body>
<center>
<table width="75%">
<tr>
<td class="block"><center>Jorge Peņa</center></td>
</tr>
<tr>
<td>
<table>
<tr>
<td class="block"><center><a href="index.htm">Home</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="profile.htm">Profile</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="programs.htm">Programs</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="sources.htm">Sources</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="links.htm">Links</a></center></td>
</tr>
</table>
</td>
<td class="block">Finally my frickin site back.</td>
</tr>
</table>
</center>
</body>
</html>


index.css

body {

}

a {
text-decoration: none;
color: blue;
}

a:link {
text-decoration: none;
color: blue;
}

a:visited {
text-decoration: none;
color: blue;
}

a:hover {
text-decoration: none;
color: yellow;
}

.block {
background-color: #F3F3F3;
}


I uploaded my page so you can take a look at what the problem is, here [ www.jorgepena.be ]. Thanks for any help, appreciated.
thunder77
05-15-2006, 01:40 PM
I'm not really sure what you're looking to do here and many will tell you that is so the wrong way to code a page like that... you have two tables present where you need none... at any rate, if you are just looking for the name to span the two lower blocks (nav and content) you need to add colspan="2" into the first <td> entry.
blank
05-15-2006, 01:49 PM
Ah, I understand now, I remember that attribute now, thanks thunder77. I know it's the wrong way, I rarely code in HTML and I know that I did many things 'the hard way', and they didn't even work. For example, I made every td tag have the class "block", if I would've simply made a td style in the css file, however, it wouldn't show the little margins around the block, it'd all just be one solid color, is there a way against that? Also, I don't need any tables? Or just one? How so? I'm not looking for an exact answer, just in general so I can look it up if you want. Thanks for the help so far.


<html>
<head>
<title>Jorge Peņa - Blank Denim</title>
<link href="index.css" rel=StyleSheet type="text/css" />
</head>
<body>
<center>
<table width="75%">
<tr>
<td colspan="2" class="block"><center>Jorge Peņa</center></td>
</tr>
<tr>
<td class="block"><center><a href="index.htm">Home</a></center></td>
<td rowspan="5" class="block">Finally my frickin site back.</td>
</tr>
<tr>
<td class="block"><center><a href="profile.htm">Profile</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="programs.htm">Programs</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="sources.htm">Sources</a></center></td>
</tr>
<tr>
<td class="block"><center><a href="links.htm">Links</a></center></td>
</tr>
</table>
</center>
</body>
</html>


Pretty much fixed, thanks.
Webnerd
05-15-2006, 02:27 PM
Here is what he means my no tables;


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jorge Peņa - Blank Denim</title>
<link href="index.css" rel=StyleSheet type="text/css" />
<style type="text/css">
#contentBody{
margin:0px auto 0px auto;
width:75%;
}
#header{
text-align:center;
font-weight:bold;
}
#leftNav{
float:left;
list-style-type:none;
padding:0px;
margin:0px;
width:15%;
text-align:center;
}
#leftNav li{
margin:0px 0px 0px 0px;
padding:0px 0px 5px 0px;
}

</style>
</head>
<body>
<div id="contentBody">
<div id="header">Jorge Peņa</div>
<ul id="leftNav">
<li><a href="index.htm">Home</a></li>
<li><a href="profile.htm">Profile</a></li>
<li><a href="programs.htm">Programs</a></li>
<li><a href="sources.htm">Sources</a></li>
<li><a href="links.htm">Links</a></li>
</ul>

Here is my content

</div>
</body>
</html>