...

View Full Version : tables within a table?



doni
02-21-2004, 05:10 AM
Hello everyone,

I'm hoping someone can help. I'm trying to build a web page that will consist of one table. That table will have 3 rows. The top row contains the company name. The bottom row has the copyright info.

Now the middle row is where the problem lies. It should have 2 seperate tables. The left table should be approximatly 100 pixels wide. The table on the right should be as wide as the remainder of the outer table.

For some reason, can't get the table on the right to apear within the width of the outer table.

My HTML code as of yet follows below.

TIA


<html>
<body><table border=1>
<tr><td>
<CENTER><H1>New Horizon Properties & Investments, L.L.C.</H1></CENTER>
</td></tr>

<!--Start second row>
<tr>
<td width=100 valign="top" align="right">
<!--Start of the left table>
<table border=2>
<tr>
<td><a href=home.html>Home</td>
</tr>
<tr>
<td><a href=seller.html>Seller's Area</td>
</tr>
<tr>
<td><a href=buyer.html>Buyer's Area</td>
</tr>
</table>
</td>


<!--This is still in the testing phase, once it works I'll update>
<!--content of this table>
<!--Start of the right table>
<td width=100 valign="top" align="left">
<table border=2>
<tr>
<td><a href=home.html>Home</td>
</tr>
<tr>
<td><a href=seller.html>Seller's Area</td>
</tr>
<tr>
<td><a href=buyer.html>Buyer's Area</td>
</tr>
</table>
</td>
</tr>


<tr><td><center>Copyright 2004 New Horizon Properties & Investments, L.L.C. All Rights Reserved.</center></td></tr>
</table></body>
</html>

Vladdy
02-21-2004, 05:20 AM
<tables> are for tabular data - your page is not.
You might want to do some homework on the modern methods of laying out web page.
.... psst.... CSS

doni
02-21-2004, 05:23 AM
Vladdy,

First thanks for the quick response.

Second I didn't realize that I couldn't use table to do this. But after I posted that, I got to thinking about the possibility of using CSS.

I'm reviewing a couple of tutorials on that subject right now.

Vladdy
02-21-2004, 05:29 AM
You CAN use tables for that, just like you can drive a screw in with a knife. It's all about the right tool for the job.

MysteryMan
02-21-2004, 05:30 AM
Originally posted by Vladdy
You CAN use tables for that, just like you can drive a screw in with a knife. It's all about the right tool for the job.

One word dominants the choice of all able choices............and the evolution of design.......

efficiency

dysfunctionGazz
02-22-2004, 12:23 PM
OK im sure im gonna get an absolute slating for my bad code here and my using of tables, but heres the effect you asked for done in tables....

<html>
<body>
<table border="1" width="600" cellpadding="0" cellspacing="0">
<tr><td height="150" bgcolor="pink">
I am the top pink box. I have no other purpose in life than my tempory existence.
</td></tr>
<tr><td height="150">
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr><td width="100" bgcolor="blue">
Im a cell thats 100 px wide! Yay! look at me! wooooooo!
<td width="*" bgcolor="yellow">
blah blah blah second box the size of rest of outer table.
</table>
</td></tr>
<tr><td bgcolor="limegreen" height="150">
Yuk! wot an awful shade of green!!!
</td></tr>
</table>
</body>
</html>

I think. Well it works for me anyway. The trick is you are nesting a seperate 2 column table within the middle row.
Gazz

Kang He
02-22-2004, 10:38 PM
I've not been very active for a while in the web site coding scene, how's the support for CSS these days?

Because I still use tables. And I like it.

J&J
02-22-2004, 11:17 PM
Personally, I think it's annoying when someone asks a question on how to do something with tables, the answer given is stuff like "tables are for tabular data, use CSS", which isn't helpful at all nor does it answer the question originally asked.

Yes, what DONI asked for was how to do it with tables, not why she should use CSS or why she should learn it, etc. It's one thing to tell her what other options she has, but it's another to not give the help she asked for because you don't agree with using tables instead. Who knows, she may need a quick-fix table setup for now so her site's not down, while she goes out to learn some CSS.

But anyways... since most who's posted has already "briefed" her on the CSS vs. tables, I won't discuss it in my post. :D

----

3 tables are better than 1 huge one with nested tables in it. Use 1 table for the header, 1 table for the middle part, and a final table for the footer. Or even better is to use a table for the middle part only, and let the header & footer sit on top & below it (not enclosed in tables).

Make sure you specify a matching width for all 3 tables if you choose to go this route (shown below), so that they are rendered quickly and so that the tables match/align with each other.

In certain browsers (like Netscape), they show a little spacing under each row, and between each table. Let's see if I remember the fix for it... You can try applying a block style to all of the <tr> elements.

--------
Here's the CSS for it:

<style type="text/css">
<!--
tr.layout {display: block;}
td {display: inline;}
//-->
</style>
------------

Now here's the html portion of the page:


<table summary="HEADER" align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr class="layout">
<td align="center">
<h1>New Horizon Properties & Investments, L.L.C.</h1>
You don't even really need this in a table since you're
only using 1 cell. It can rest above the tables instead.
</td>
</tr>
</table>

<table summary="BODY" align="center" border="0" cellspacing="0" cellpadding="0" width="100%" cols="2">
<tr class="layout">
<td valign="top" width="100">
<p><a href=home.html>Home</a></p>
<p><a href=seller.html>Seller's Area</a></p>
<p><a href=buyer.html>Buyer's Area</a></p>
You can use lists instead of <p> if you prefer.
</td>
<td valign="top">
RIGHT column contents here. Blah blah blah blah....
</td>
</tr>
</table>

<table summary="FOOTER" align="center" border="0" cellspacing="0" cellpadding="0" width="100%">
<tr class="layout">
<td align="center">
Copyright 2004 New Horizon Properties & Investments, L.L.C. All Rights Reserved.
You don't even really need this in a table since you're only
using 1 cell. It can sit below the above table instead.
</td>
</tr>
</table>

----------

Let me know how this works out for you! You could set the borders to 1 so that you can see where everything sits, and then change it back to 0 when you're done tweaking what you need. Good luck...



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum