[HTML-HELP] Tables in Tables

Foxtrot · Aug 7, 2008

Hey there. I'm coding a layout and all the boxes need to be expandable. I've coded this and it works. Look at the result:

Foxtrot - [HTML-HELP] Tables in Tables - RaGEZONE Forums

Up until it reaches the blue is the image, but the blue table is expandable and coded. The text goes their perfectly. However, I want this where the text is.

That box is also coded to be expandable and works. But it goes all messy and completely ruins the layout when I replace the text with the code for that above table.

Any ideas?

Complete Page Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css">
    body {background-image: url('b.png');}
.boxes {
    padding-left: 9px;
    padding-right: 3px;
}    
.style1 {
    padding-left: 9px;
    padding-right: 3px;
    font-size: 10px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}
.topright {
    padding-top: 8px;
}    
.marquee {
    padding-left: 58px;
    padding-right: 8px;
    font-size: 10px;
    color: #000000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
}    
    #nav {position: absolute; right: 20; top: 15;}
</style>
</head>
<body>
<center>
<img src="Banner2.png">
    <td width="912" valign="top"><table width="912" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="main-top.png" /></td>
      </tr>
      <tr>
        <td background="main-middle.png" class="style1"><p>Expands vertical.</p><p>Expandable.</p><p>Table should be here. ;(</p>
      <tr>
        <td><img src="main-bottom.png" /></td>
      </tr>
</body>
</html>

News Box Code:

Code:

<div id="nav"><td width="197" valign="top"><table width="197" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="nav-top.png" /></td>
      </tr>
      <tr>
        <td background="imgs/leftmid.png" class="style1"><p>lol</p><p>sl</p>
      <tr>
        <td><img src="imgs/leftbot.png" /></td>
      </tr></div>

(It still doesn't work without the DIV tags)

IDEAS? PLEASE HELP.

danse · Aug 7, 2008

maybe for starters why the hell the <table> tag is after the <tr> tag, and why the <table> tag is not closed anywhere ? Try fixing the basics if it still won't work we will go futher, because right now it's so messy i don't even want to get deeper into it.

Foxtrot · Aug 7, 2008

'Coz I copied some of the code from somewhere else. Thanks?

Foxtrot · Aug 7, 2008

Code:

<table width="912" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="main-top.png" /></td>
      </tr>
      <tr>
        <td background="main-middle.png" class="style1"><p>Expands vertical.</p><p>Expandable.</p><p>Table should be here. ;(</p></td></tr>
      <tr>
        <td><img src="main-bottom.png" /></td>
      </tr>

That better?

danse · Aug 7, 2008

Yep if that's all what shall be in this table then close the <table> tag, now i'm tryin to understand your goal, concept but it's quite late so it's hard for me to focus, what do you expect the tables and to divs, how they should behave and on what event ? More text makes the news box higher and higher ?

Foxtrot · Aug 7, 2008

Both tables are expandable and expand vertically downwards (creates a new line and expands the height of the box). I want the news box to be INSIDE that blue table. I've made the blue table expand so that when I add text to the news box, it expands and when it expands, the blue table expands. But I can't get the news box inside without everithing going out of place.

danse · Aug 7, 2008

It's because the #nav style position is absolute, make it relative or drop the position attribute and position it with margins or table cellpading ;-) ( i mean the div naturally ).

Foxtrot · Aug 7, 2008

It still doesn't work without the div tags. I'll try it though.

Thanks.

danse · Aug 7, 2008

Foxtrot said:
It still doesn't work without the div tags. I'll try it though. Thanks.

i meant the way u made it with div tag, just edit the style ( #nav ).

Foxtrot · Aug 7, 2008

Can you give me the edited style please? I'm not familiar with margins and cell-padding.

danse · Aug 7, 2008

Code:

#nav {position: relative; right: 20px; top: 15px;}
//or
#nav {margin-right: 20px; margin-top: 15px;}

Foxtrot · Aug 7, 2008

Still no luck.

danse · Aug 7, 2008

paste me the whole damn code

Foxtrot · Aug 7, 2008

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Title</title>
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css">
	body {background-image: url('bg.png');}
.boxes {
    padding-left: 9px;
	padding-right: 3px;
}	
.style1 {
	padding-left: 9px;
	padding-right: 3px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
.topright {
    padding-top: 8px;
}	
.marquee {
    padding-left: 58px;
	padding-right: 8px;
	font-size: 10px;
	color: #000000;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}	
#nav {margin-right: 20px; margin-top: 15px;}

</style>
</head>
<body>
<center>
<img src="Banner.png">
<table width="912" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="main-top.png" /></td>
      </tr>
      <tr>
        <td background="main-middle.png" class=" style1"><div id="nav"><td width="197" valign="top"><table width="197" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td><img src="nav-top.png" /></td>
      </tr>
      <tr>
        <td background="imgs/leftmid.png" class="style1"><p>lol</p><p>sl</p>
      <tr>
        <td><img src="imgs/leftbot.png" /></td>
      </tr></div></td></tr>
<img src="main-bottom.png" />
</body>
</html>

danse · Aug 7, 2008

again you have messed the tags, you open a new td tag without closing the previous one etc etc, get some notepad++ or similar so you will have syntax in color and clean up this mess. If you want to make sure your code is correct, paste the code in here.

http://validator.w3.org/#validate_by_input

s-p-n · Aug 8, 2008

You shouldn't put tables inside a <table> tag.
There are ways of getting around it pretty easily.

Take a look at this example:

Code:

<body>
<table width="100%" height="100%">
	<tr>
		<td width="100%" height="100">
			<table width="100%" height="100%">
				<tr>
					<td width="100%" height="100%" align="center" valign="middle">
						<h1>This is a Title</h1>
					</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td width="80%" height="100%" align="left" valign="top">
			<table width="100%" height="100%">
				<tr>
					<td width="80%"><p>This is a Body.</p>
					</td>
					<td width="20%">This is a second body</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
</body>

This will put a title bar at the top of the page, a body, and a side-body

Notice that you can put tables inside <td>
Since <td> goes inside <tr> which goes inside <table> which can go inside <td>, you can make a website.

!BERZERK! · Aug 8, 2008

i think that you should simply give up and go back to w3schools and invest in a month of learning, thats what i did.

because by the look of it you have no idea what your doing and youve gotten yourself into something you dont understand.

Practise writing out your own code instead of copying and pasting from another layout.

[HTML-HELP] Tables in Tables

Foxtrot

Junior Spellweaver

danse

hello

Foxtrot

Junior Spellweaver

Foxtrot

Junior Spellweaver

danse

hello

Foxtrot

Junior Spellweaver

danse

hello

Foxtrot

Junior Spellweaver

danse

hello

Foxtrot

Junior Spellweaver

danse

hello

Foxtrot

Junior Spellweaver

danse

hello

Foxtrot

Junior Spellweaver

danse

hello

s-p-n

:-)

!BERZERK!

Skilled Illusionist

RaGEZONE Sponsor

About RaGEZONE

Forum Statistics

RaGEZONE Partners