Web Analytics Made Easy - StatCounter tables within a table? - CodingForum

Announcement

Collapse
No announcement yet.

tables within a table?

Collapse
X
Collapse
 
  • Page of 1
  • Filter
  • Time
  • Show
Clear All
new posts
Previous template Next
  • #1

    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; Feb 21, 2004, 12:15 AM.
    Tags: None
  • #2
    <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"

    Comment

    • #3
      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.

      Comment

      • #4
        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"

        Comment

        • #5
          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

          Comment

          • #6
            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

            Comment

            • #7
              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.

              Comment

              • #8
                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; Feb 22, 2004, 06:35 PM.
                ~ J&J ~
                "Sometimes I feel like I'm rearranging deck chairs on the Titanic."

                Work | Family | Community

                Comment

                Previous template Next
                Working...
                X