...

View Full Version : Making a Table within a Table.



wicked_ryoko
05-31-2007, 03:34 AM
Ok, I'm working on a design using tables, I haven't learned to us div yet. But I can't seem to remember how to do a table within a table. The reason I want to do this, is I want to do an expanding table on the outside that will grow with the table/s I may put on the inside. Please help, thanks.

sdcomputerz
05-31-2007, 03:43 AM
Try


<table>
<tr>
<td>
<table>
<tr>
<td>
<p>Hello World!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

wicked_ryoko
05-31-2007, 03:48 AM
So, kinda like this? I'm sorry I learn from example.



<table>
<td>
<tr>
Words....
</td>
</tr>
</table>
</td>
Another table words...
</tr>
</table>


I am sorry but that was too vague for me...

sdcomputerz
05-31-2007, 03:55 AM
First of all, you have <td> and <tr> mixed up. Second, if you learn by example, read my first post again. Below: the first table is in blue, the second table is in red. The red table is inside the blue table.

<table>
<tr>
<td>
<table>
<tr>
<td>
<p>Hello World!</p>
</td>
</tr>
</table>
</td>
</tr>
</table>

wicked_ryoko
05-31-2007, 03:58 AM
Man. Sorry about this. but when I first saw your post, this was all that showed up.



</tr>
</table>
</td>
</tr>
</table>


I had copied this using the right click too. Maybe the page didn't load right. Anyway, thank you very much.

VIPStephan
05-31-2007, 04:05 AM
You know, you would probably be faster learning how to create pages with semantic HTML (http://brainstormsandraves.com/articles/semantics/structure/) rather than us explaining you how to “correctly” nest tables…

Where to nest tables depends on how your layout is supposed to look like. And that’s the complicated thing with tables because it’s nasty to change the layout later on.

Basically you always put a nested table into a table cell (td), either next to each other or in another row:



<table>
<tbody>
<tr>
<td>
<table>
<tbody>
<tr>
<td>text here</td>
<td>next column to the right</td>
</tr>
</tbody>
</table>
</td>
<td>
<table>
<tbody>
<tr>
<td>this table is next to the other one but in another column of the parent table</td>
<td>next column to the right</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td>this table is one row below the others</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>


You see how annoying this can become? With semantic HTML you would have three or four elements and position them wherever you want using floats and/or postioning.

wicked_ryoko
05-31-2007, 04:15 AM
Thanks. I think your example makes more sense.

wicked_ryoko
05-31-2007, 04:23 AM
Sorry about the double post, but a friend just said this was easier, to do.



<table>
<td>
<table>
<td>
This is Column 1
</td>
<tr>
<td>
This is Column 2
</td>
</tr>
</table>
</td>
</table>

sdcomputerz
05-31-2007, 04:36 AM
Well that code is not written very well at all. You have the <tr> and <td> tags confused again. You might want to google table tutorials (http://www.google.com/search?q=tables+tutorial&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_enUS215US217&aq=t), and try to straighten things up.

VIPStephan
05-31-2007, 12:43 PM
Oh my! You know, with 4 divs and a little simple CSS you can achieve the very same thing as with the tables I posted previously. And you are waaaaaaay more flexible:

HTML


<div id="container">
<div id="section1">content</div>
<div id="section2">more content</div>
<div id="section3">other content</div>
</div>


CSS


#container {
width: 600px;
margin: auto;
}
#section1 {
float: left;
width: 50%;
}
#section3 {clear: both;}


Now, this is a very simple and basic example but you might get the idea. This is putting section1 and section2 next to each other, kinda like two columns, and section 3 underneath, like another row if you were thinking in tables.

If you wanted section 1 on the right next to section 2 instead of on the left you would just change the float: left; to right in the CSS. You could also put section 3 on top of everything in one second. I wanna see you doing that with tables.

And also your code becomes just so clean you won’t have trouble editing it later on.
So please do it correctly right away. The time you waste on trying how you can do that with tables (and the time we waste by trying to help you) can easily be invested in learning how to use semantic code and CSS. And you will have a lot of spare time.

wicked_ryoko
05-31-2007, 07:32 PM
This sounds very interesting. I'm not sure what kind of search keywords to use to get a tutorial for div's. Perhaps someone can help?

sdcomputerz
05-31-2007, 07:46 PM
http://www.google.com/search?q=div+tutorial&sourceid=navclient-ff&ie=UTF-8&rlz=1B3GGGL_enUS215US217

wicked_ryoko
05-31-2007, 07:55 PM
Thanks, I'll check it out. I was using the wrong keywords.

VIPStephan
05-31-2007, 08:06 PM
No, no, NO! When I see the first result in that Google search already I’m getting a headache. The keyword is not, I repeat: NOT “div layout” because it's not all about divs, you know? The keyword you wanna look up is “semantic HTML” (and I posted a link already) because that’s the correct approach.

Drop the table column and row and cell thinking, drop thinking in div boxes or layers, start thinking out of the box. (Hah! That’s matching the subject. :)).

Damn, I really should write a tutorial on how to start right. I’m repeating myself.

OK, to give you an idea: Structure comes first, then the design/style. Divide your page into sections (not boxes) using the division element. Yes, divs are needed but they aren’t the cure for everything (as isn’t absolute positioning).

A basic page could look like this:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>title here</title>
</head>

<body>
<div id="container">
<div id="header">Content for "header" Goes Here</div>
<div id="content">Content for "content" Goes Here</div>
<div id="footer">Content for "footer" Goes Here</div>
</div>
</body>
</html>


Don’t forget the doctype in the very beginning.
And then you put the respective content in those sections:




<div id="container">
<div id="header">
<h1>page title/company name</h1>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div id="content">
<p>text</p>
<img />
<div id="special">
<h2>special announcement</h2>
<p>text</p>
</div>
</div>
<div id="footer">copyright or whatever</div>
</div>

And look how you would assign sub sections and name them after their purpose.

And after you’ve got that all clearly marked up and sorted out you start styling it with CSS. BonRouge (http://bonrouge.com)’s website is a good resource (look at the CSS layouts). But for more basic things htmldog.com might be a good start as well.

wicked_ryoko
05-31-2007, 08:35 PM
Ok, I'll take a look at all that, and thanks. I did understand the basics of it.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum