Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts

    tables within a table?

    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>
    Last edited by doni; 02-21-2004 at 05:15 AM.

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <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
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #3
    Regular Coder
    Join Date
    Oct 2002
    Posts
    178
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #5
    Banned
    Join Date
    Feb 2004
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Regular Coder
    Join Date
    Jul 2002
    Location
    Brighton
    Posts
    180
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #7
    New Coder
    Join Date
    Jun 2002
    Location
    behind you
    Posts
    37
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    ~Kang He
    Prepare to be b0rkified.

  • #8
    J&J
    J&J is offline
    New Coder
    Join Date
    Sep 2003
    Location
    your temp folder
    Posts
    89
    Thanks
    0
    Thanked 0 Times in 0 Posts

    efficient/fast loading table

    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.

    ----

    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...
    Last edited by J&J; 02-22-2004 at 11:35 PM.
    ~ J&J ~
    "Sometimes I feel like I'm rearranging deck chairs on the Titanic."


    Work | Family | Community


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •