Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

[HTML-HELP] Tables in Tables

Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
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.

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


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. :)
 
hello
Member
Joined
Jun 24, 2004
Messages
726
Reaction score
158
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.
 
Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
'Coz I copied some of the code from somewhere else. Thanks? ;)
 
Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
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?
 
hello
Member
Joined
Jun 24, 2004
Messages
726
Reaction score
158
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 ?
 
Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
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.
 
hello
Member
Joined
Jun 24, 2004
Messages
726
Reaction score
158
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 ).
 
Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
It still doesn't work without the div tags. I'll try it though. ;) Thanks.
 
Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
Can you give me the edited style please? I'm not familiar with margins and cell-padding.
 
hello
Member
Joined
Jun 24, 2004
Messages
726
Reaction score
158
Code:
#nav {position: relative; right: 20px; top: 15px;}
//or
#nav {margin-right: 20px; margin-top: 15px;}
 
Junior Spellweaver
Joined
Dec 30, 2007
Messages
115
Reaction score
5
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>
 
hello
Member
Joined
Jun 24, 2004
Messages
726
Reaction score
158
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.

 
Joined
Jun 8, 2007
Messages
1,985
Reaction score
490
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.
 
Skilled Illusionist
Joined
Dec 7, 2007
Messages
337
Reaction score
0
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.
 
Back
Top