Tables within tables

Discussion in 'HTML' started by Otuatail, Jul 31, 2004.

  1. Otuatail

    Otuatail Guest

    I am tring to have to tables within a main table. The left table is a menu of
    buttons, the right is the content. The problem i have is if the content on the
    right is less than the menu table on the left, the content verticaly aligns its
    self and I can't get the logo/Banner to align at the top of the page. The menu
    was originaly on the right side but I could not fix it's position between 700
    and 800 pixels on the page consistantly from page to page. Is there away around
    this alignment.

    I heard mention of absolute positioning. Can I have to seperate tables on a
    page and absolute position them?

    Desmond.
    Otuatail, Jul 31, 2004
    #1
    1. Advertising

  2. Otuatail wrote:

    > I am tring to have to tables within a main table.


    Oh dear. That is almost always caused by abusing tables for layout.
    http://www.allmyfaqs.com/faq.pl?Tableless_layouts

    > The left table is a menu of buttons,


    A menu? That sounds more like a list then a table.
    http://css.maxdesign.com.au/listamatic/

    > the right is the content.


    That might be a table, or it might include tables, then again tables might
    not come into it at all. Depends on the content.

    > The problem i have is if the content on the right is less than the menu
    > table on the left, the content verticaly aligns its self and I can't get
    > the logo/Banner to align at the top of the page.


    http://www.w3.org/TR/CSS2/visudet.html#line-height

    > The menu was originaly on the right side but I could not fix it's position
    > between 700 and 800 pixels on the page consistantly from page to page.


    http://www.allmyfaqs.com/faq.pl?AnySizeDesign

    > I heard mention of absolute positioning. Can I have to seperate tables on
    > a page and absolute position them?


    Yes, but that probably isn't a good solution to the problem.

    --
    David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
    Home is where the ~/.bashrc is
    David Dorward, Jul 31, 2004
    #2
    1. Advertising

  3. Otuatail

    Webcastmaker Guest

    In article <>,
    says...
    > I am tring to have to tables within a main table. The left table is a menu of
    > buttons, the right is the content...


    You need to do several things. First, always include a URL showing
    the problem. Second, learn CSS layout. Both will help you solve the
    problem.
    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
    Webcastmaker, Jul 31, 2004
    #3
  4. Otuatail

    SpaceGirl Guest

    Webcastmaker wrote:

    > In article <>,
    > says...
    >
    >>I am tring to have to tables within a main table. The left table is a menu of
    >>buttons, the right is the content...

    >
    >
    > You need to do several things. First, always include a URL showing
    > the problem. Second, learn CSS layout. Both will help you solve the
    > problem.


    If he's struggling with tables, you think CSS is any easier!?

    *shakes her head*

    --


    x theSpaceGirl (miranda)

    # lead designer @ http://www.dhnewmedia.com #
    # remove NO SPAM to email, or use form on website #
    SpaceGirl, Jul 31, 2004
    #4
  5. Otuatail

    Webcastmaker Guest

    In article <>,
    says...
    > > You need to do several things. First, always include a URL showing
    > > the problem. Second, learn CSS layout. Both will help you solve the
    > > problem.

    > If he's struggling with tables, you think CSS is any easier!?


    He is struggling with nested tables. CSS probably is easier.

    --
    WebcastMaker
    The easiest and most affordable way to create
    Web casts, or put presentations on the Web.
    www.webentations.com
    Webcastmaker, Jul 31, 2004
    #5
  6. Otuatail

    Otuatail Guest

    Thanks for all the sugestions the CSS is working better but I have a gap
    between 2 tables and I cant position them or close the gap. This is what I have
    in CSS

    ..table1
    {
    float: left;
    width: 160px;
    left: 0;
    top: 0;
    }

    ..
    ..table2
    float: left;
    width: 160px;
    left: 500;
    top: 100;
    }

    and in html

    <div class="table1">
    <table>
    <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
    </tr>
    </table>
    </div>


    <div class="table2">
    <table>
    <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
    </tr>
    </table>
    </div>

    desmond.
    Otuatail, Jul 31, 2004
    #6
  7. Otuatail

    rf Guest

    Otuatail wrote:

    > Thanks for all the sugestions the CSS is working better but I have a gap
    > between 2 tables and I cant position them or close the gap. This is what I

    have
    > in CSS


    <snip code>

    Don't supply code. Upload an example page to somewhere and provide a URL to
    it. Makes it easier.

    However, in this case, it is easy enough to see what is happening.

    Your CSS rules select things like .table. However, the selected element is a
    div, not a table. Confusing for you and me.

    Use classes like "nav" and "content".

    Turn on borders for everything in your CSS:
    * {border: solid 1px green;}

    You should see where the elements are going.

    If you don't then for each of your .table[n] rules add a different border:
    border: solid 1px red;
    and
    border: solid 1px blue;

    You will see that the divs (which you are floating left) are right next to
    each other.

    The tables are not because they are not as wide as the divs. You can see
    this now you have borders on.

    <aside>
    Worser yet, if you add some more content to those tables, by say putting
    "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" in one of the cells you will see that
    everything will expand to fit that content, as it should.

    The width's you have specified are only suggestions :)
    </aside>

    You do seem to be getting the idea behind CSS. However, take it all the way.
    Get rid of the tables entirely, they are only confusing the issue and you
    are ending up with a sort of hybrid of the two different approaches to
    layout. Tables | CSS, not tables & CSS (unless your table contains tabular
    data of course).

    Make your navigation into an <ul> and float that left. Each of the links
    become a <li>. The content should be a div, not a table (or a table within a
    div), and it should not be floated (in this case). Just give it a suitable
    left margin (optional), so its content stays to the right of the navigation.

    If you provide a URL to what you have at the moment then it will only take a
    few minutes for one of us to convert that to a true CSS layout. You will
    also see why it is better to use em's for those dimensions rather than
    pixels, and a few other things to boot. (listening Jukka :) )

    --
    Cheers
    Richard.
    rf, Jul 31, 2004
    #7
  8. Otuatail

    DU Guest

    SpaceGirl wrote:
    > Webcastmaker wrote:
    >
    >> In article <>,
    >> says...
    >>
    >>> I am tring to have to tables within a main table. The left table is a
    >>> menu of
    >>> buttons, the right is the content...

    >>
    >>
    >>
    >> You need to do several things. First, always include a URL showing
    >> the problem. Second, learn CSS layout. Both will help you solve the
    >> problem.

    >
    >
    > If he's struggling with tables, you think CSS is any easier!?
    >
    > *shakes her head*
    >


    Recently, a tableless design of the microsoft.com site proved a file
    size reduction of 62% while improving several other aspects
    (accessibility, nr of browsers supported, site maintainability, etc) of
    the webpage.

    Throwing Tables Out the Window
    http://www.stopdesign.com/articles/throwing_tables/

    There are other sites who have done a similar comparison and they all
    reached basically the same results. The more a site relies on nested
    tables, the more the page file size is bigger and the page download
    time, rendering time is longer. Also, the page is more prone to crash on
    modest user system when making commands (e.g.: printing a text selection
    which involves nested tables content).

    Relying on table design (in particular nested tables) for layout just
    does not make any sense from many perspectives.

    Why tables for layout is stupid:
    problems defined, solutions offered
    http://www.hotdesign.com/seybold/

    Tables My Ass
    http://www.htmldog.com/ptg/archives/000049.php

    Tableless layout HOWTO
    http://www.w3.org/2002/03/csslayout-howto

    DU
    DU, Aug 2, 2004
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Richie Bisset
    Replies:
    1
    Views:
    362
    brucie
    Jul 25, 2003
  2. Peter Bassett
    Replies:
    3
    Views:
    912
    Augustus
    Aug 15, 2003
  3. Alex
    Replies:
    6
    Views:
    2,878
    Mark Parnell
    May 3, 2004
  4. Chris Brat
    Replies:
    5
    Views:
    687
    =?iso-8859-1?q?Luis_M._Gonz=E1lez?=
    Aug 22, 2006
  5. Elmo Watson
    Replies:
    1
    Views:
    582
    Eliyahu Goldin
    May 8, 2007
Loading...

Share This Page