Need help with XHTML tables

DeathByPixels · 07-17-2005

I've been trying to code a fairly simple layout for a friend and have run into a problem already.

www.astralplanet.co.uk/test/et/index.htm

Basically, I'm trying to set up a table cell for the main content (white box is meant to be the content area), and I want this in the middle (put it this way, the vertical slogan is on the left, content area in the middle, navigaion on the right). but it keeps going to the right. And the navigation panel won't show up. How do I make the main content area go to the middle and make the navigation panel show up? I've tried this in Firefox and IE6. I'm new to coding, but have been trying to teach myself. but I'm stuck with this.

This is the code I've got so far.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Energetic Training</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<table class="pageborders" align="center" width="750" border="0" cellpadding="0" cellspacing="0">
<!-- Header -->
  <tr>
  	<td class="headerbackground" height=92><img src="http://www.astralplanet.co.uk/test/et/images/title.gif" alt="Energetic Training"></td>
  	<td class="headerbackground" height="92">&nbsp;</td>
  </tr>
<!-- END Header -->
  <tr>
  	<td width="35" align="left" valign="top"><img src="http://www.astralplanet.co.uk/test/et/images/slogan.gif" alt="Enjoy the gift of learning..."></td>
<!-- Main Content Area -->
	<td width="579" align="center" class="maincontentarea"> </td>
<!-- END Main Content Area -->
<!-- Navigation -->
	<td width="136" align="right" class="navpanel"> </td>
<!-- END Navigation -->
  </tr>
</table>

</body>
</html>

Would be grateful for any help.

Thanks.

Uncle Ghed · 07-17-2005

Set a colspan in the second cell of your header...
Otherwise you have two cells on the first <tr> and three on second! ^^

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Energetic Training</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<table class="pageborders" align="center" width="750" border="0" cellpadding="0" cellspacing="0">
<!-- Header -->
  <tr>
  	<td class="headerbackground" height=92><img src="http://www.astralplanet.co.uk/test/et/images/title.gif" alt="Energetic Training"></td>
  	<td class="headerbackground" height="92" colspan="2">&nbsp;</td>
  </tr>
<!-- END Header -->
  <tr>
  	<td width="35" align="left" valign="top"><img src="http://www.astralplanet.co.uk/test/et/images/slogan.gif" alt="Enjoy the gift of learning..."></td>
<!-- Main Content Area -->
	<td width="579" align="center" class="maincontentarea"> </td>
<!-- END Main Content Area -->
<!-- Navigation -->
	<td width="136" align="right" class="navpanel"> </td>
<!-- END Navigation -->
  </tr>
</table>

</body>
</html>

DeathByPixels · 07-17-2005

Okay thanks, but exactly what does colspan do (just for my future reference)? Btw, it didn't solve my problem, not that I can see...

scrowler · 07-18-2005

colspans simply define how many columns the cell should span. colspan="2" would mean the regular cell would span 2 cells horizontally. it's like if you took 2 cells in a table next to eachother and merged them to create one cell with a colspan of 2.

rowspan is the same but vertical.

-edit- the reason your coding isn't working is because the current layout of your table doesn't support 3 columns along while theres only 2 in the top, without doing what its doing. you need to use nested tables, as in, where you have a table inside a table.

try this code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Energetic Training</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<table class="pageborders" align="center" width="750" border="0" cellpadding="0" cellspacing="0">
  <tr>
  	<td class="headerbackground" height="92"><img src="http://www.astralplanet.co.uk/test/et/images/title.gif" alt="Energetic Training"></td>
  </tr>
  <tr>
     <table style="border: 0">
  	<td width="35" align="left" valign="top"><img src="http://www.astralplanet.co.uk/test/et/images/slogan.gif" alt="Enjoy the gift of learning..."></td>
	<td width="579" align="center" class="maincontentarea"> </td>
	<td width="136" align="right" class="navpanel"> </td>
     </table>
  </tr>
</table>

</body>
</html>

DeathByPixels · 07-18-2005

I see, thanks. But I did that as advised and it didn't help, so any suggestions?

Uncle Ghed · 07-18-2005

Colspan gives a <td> tag the capability of spanning itself over more than one cell. Tables in html are a rigid grid, so if you have row with five cells, html wants you to have 5 cells in every row of your table. This is unless you use the colspan attribute, giving it the number of cells you want to span. You can do this vertically too, with the rowspan attribute.

Looks like the problem is that the first cell on the top left corner is too big, and it gives the width attribute to your whole column. You should probably nest a table in your second row to have more freedom...

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Energetic Training</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>

<table class="pageborders" align="center" width="750" border="0" cellpadding="0" cellspacing="0">
<!-- Header -->
  <tr>
  	<td class="headerbackground" height=92><img src="http://www.astralplanet.co.uk/test/et/images/title.gif" alt="Energetic Training"></td>
  	<td class="headerbackground" height="92" colspan="2">&nbsp;</td>
  </tr>
<!-- END Header -->
  <tr>
  	<td colspan="2">
  	<!-- NESTED TABLE -->
  		<table border="0" cellpadding="0" cellspacing="0">
  			<tr>
  				<td width="35" align="left" valign="top"><img src="http://www.astralplanet.co.uk/test/et/images/slogan.gif" alt="Enjoy the gift of learning..."></td>
				<!-- Main Content Area -->
					<td width="579" align="center" class="maincontentarea">&nbsp;</td>
				<!-- END Main Content Area -->
				<!-- Navigation -->
					<td width="136" align="right" class="navpanel">&nbsp;</td>
				<!-- END Navigation -->
				</tr>
			</table>
			
		</td>
	</tr>
</table>

</body>
</html>

hope i've helped...

scrowler · 07-18-2005

*post updated - check updated code*

i believe uncle ghed's second solution is the same or similar so his should work too.

please keep in mind that most of your code is not xhtml, it is html. the difference is that you cannot use attribute tags like: align, valign, width, cellspacing, cellpadding, border. you have to use their css equivalents. you also cannot use capital letters in tags, and you must enclose all values in double quotes (<tag style="css.code: something">)