2-column-layout with <table>

Discussion in 'HTML' started by Markus.Baerlocher@lau-net.de, Apr 22, 2006.

  1. Guest

    Hi,

    i would like to make a I 2-column-layout with <table>.

    How do i make a space between the two "columns"?

    <table style="width:100%; border:1px solid #003399; ">
    <tr>
    <td>
    <table style="width:46%; border:1px solid #003399; ">
    <tr>
    <td style="padding:1.5em; >
    <p>content left</p>
    </td>
    </tr>
    <tr>
    <td style="padding:1.5em; >
    <p>content left</p>
    </td>
    </tr>
    </table>
    <!-- space 8% - how? -->
    <table style="width:46%; border:1px solid #003399; ">
    <tr>
    <td style="padding:1.5em; >
    <p>content right</p>
    </td>
    </tr>
    <tr>
    <td style="passing:1.5em; >
    <p>content right</p>
    </td>
    </tr>
    </table>
    </td>
    </tr>
    </table>

    Thanks,
    Markus
     
    , Apr 22, 2006
    #1
    1. Advertising

  2. Neredbojias Guest

    To further the education of mankind,
    vouchsafed:

    > Hi,
    >
    > i would like to make a I 2-column-layout with <table>.
    >
    > How do i make a space between the two "columns"?
    >
    > <table style="width:100%; border:1px solid #003399; ">
    > <tr>
    > <td>
    > <table style="width:46%; border:1px solid #003399; ">
    > <tr>
    > <td style="padding:1.5em; >
    > <p>content left</p>
    > </td>
    > </tr>
    > <tr>
    > <td style="padding:1.5em; >
    > <p>content left</p>
    > </td>
    > </tr>
    > </table>
    > <!-- space 8% - how? -->
    > <table style="width:46%; border:1px solid #003399; ">
    > <tr>
    > <td style="padding:1.5em; >
    > <p>content right</p>
    > </td>
    > </tr>
    > <tr>
    > <td style="passing:1.5em; >
    > <p>content right</p>
    > </td>
    > </tr>
    > </table>
    > </td>
    > </tr>
    > </table>


    Enclosed both tables in a <div>, float one left, the other right.

    --
    Neredbojias
    Infinity has its limits.
     
    Neredbojias, Apr 22, 2006
    #2
    1. Advertising

  3. frederick Guest

    wrote:
    > i would like to make a I 2-column-layout with <table>.
    >
    > How do i make a space between the two "columns"?


    Question: Do you really need to use tables for layout, rather than CSS?

    Assuming that the answer is "yes", then you could insert a dummy table
    between the other two and set its width to 8%. In other words:

    ..container {
    border: 1px sold #003399;
    }

    #main {
    width: 100%;
    }

    #left, #right {
    width: 46%;
    }

    #dummy {
    width: 8%;
    }


    <TABLE class="container" id="main">
    <TR>
    <TD>
    <TABLE class="container" id="left">
    <TR>

    ....

    </TR>
    </TABLE>
    <TABLE id="dummy">
    </TABLE>
    <TABLE class="container" id="right">
    <TR>

    ....

    </TR>
    </TABLE>
    </TD>
    </TR>
    </TABLE>


    By the way, your original example fails to close attribute quoting for
    the following, which appears in 4 different places:
    <td style="padding:1.5em; >

    --
    AGw.
     
    frederick, Apr 22, 2006
    #3
  4. Nije Nego Guest

    On 22 Apr 2006 05:36:09 -0700, wrote:

    > Hi,
    >
    > i would like to make a I 2-column-layout with <table>.
    >
    > How do i make a space between the two "columns"?
    >
    > <table style="width:100%; border:1px solid #003399; ">
    > <tr>
    > <td>
    > <table style="width:46%; border:1px solid #003399; ">
    > <tr>
    > <td style="padding:1.5em; >
    > <p>content left</p>
    > </td>
    > </tr>
    > <tr>
    > <td style="padding:1.5em; >
    > <p>content left</p>
    > </td>
    > </tr>
    > </table>
    > <!-- space 8% - how? -->
    > <table style="width:46%; border:1px solid #003399; ">
    > <tr>
    > <td style="padding:1.5em; >
    > <p>content right</p>
    > </td>
    > </tr>
    > <tr>
    > <td style="passing:1.5em; >
    > <p>content right</p>
    > </td>
    > </tr>
    > </table>
    > </td>
    > </tr>
    > </table>
    >
    > Thanks,
    > Markus


    Sum of your tables + borders + padding is larger than 100%.

    > <td style="passing:1.5em; >


    Browsers will not understand this.
    --
    maybe later
     
    Nije Nego, Apr 22, 2006
    #4
  5. BootNic Guest

    > "" <> wrote:
    > news:....
    >
    > Hi,
    >
    > i would like to make a I 2-column-layout with <table>.
    >
    > How do i make a space between the two "columns"?
    >

    [snip]

    From your example I do not see any need to use tables embedded in a
    table.

    Looks like you could use one table with one row and 3 cells.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content=
    "text/html; charset=windows-1252">
    <style type="text/css">
    table,td,img{
    border:1px solid #003399;
    }
    table{
    width: 100%;
    padding:0;
    }
    td{
    padding: 0.5em;
    border:1px solid #003399;
    }
    ..tdl{
    width:46%;
    background-color: #87CEFA;
    }
    ..tdr{
    width:46%;
    background-color:#FFFACD;
    }
    </style>
    <title></title>
    </head>
    <body>
    <table summary="">
    <colgroup>
    <col class="tdl">
    <col>
    <col class="tdr">
    </colgroup>
    <tbody>
    <tr>
    <td>
    <p>content left</p>
    <p>content left</p>
    </td>
    <td style="border:none;"></td>
    <td>
    <p>content right</p>
    <p>content right</p>
    </td>
    </tr>
    </tbody>
    </table>
    <p><a href="http://validator.w3.org/check?uri=referer"><img src=
    "http://www.w3.org/Icons/valid-html401" "Valid HTML 4.01 Strict" height=
    "31" width="88"></a> <a href=
    "http://jigsaw.w3.org/css-validator/"><img src=
    "http://jigsaw.w3.org/css-validator/images/vcss" alt=
    "Valid CSS!"></a></p>
    </body>
    </html>

    --
    BootNic Saturday, April 22, 2006 3:05 PM

    It is well known that "problem avoidance" is an important part of
    problem solving. Instead of solving the problem you go upstream and
    alter the system so that the problem does not occur in the first
    place.
    *Edward de Bono*
     
    BootNic, Apr 22, 2006
    #5
  6. Jim Moe Guest

    wrote:
    >
    > i would like to make a 2-column-layout with <table>.
    > How do i make a space between the two "columns"?
    >

    Apply either margin or padding to one or both of the tables.
    table-left { padding-right: 8%; } - or use margin-...
    or
    table-right { padding-left: 8%; }
    or
    table-left { padding-right: 4%; }
    table-right { padding-left: 4%; }

    Your code snippet implies that you are using tables for general layout.
    Search for "2 column layout" to find modern methods for designing for the WWW.

    --
    jmm (hyphen) list (at) sohnen-moe (dot) com
    (Remove .AXSPAMGN for email)
     
    Jim Moe, Apr 22, 2006
    #6
  7. Guest

    Dear css-Professionals,

    thanks a lot for your advices! (and sorry for my switzerland-english)

    In the last days I read (and understand) a lot about the advantages of
    CSS.
    It is easy to split content and style by calling style.css in <head>.
    Unfortunately my .php doesn't have a "<head>"...

    The story behind:
    I use a BIG open-source-prog for genealogy.
    I try to append it to a "small CMS" (for this I need the
    "2-column-layout").
    Of corse it will be VERY much better with css!

    But in the .php which does my things, there is no <head> where I could
    link-in the .css
    Alternatively I tried this "table-working-around".

    I now something about HTML, and now a little about CSS - but nothing
    about PHP.
    I use the given content.php, and customyse it after:

    echo <<<TEXT

    with some HTML-code.

    This is bevore "echo <<<TEXT":
    ----------------------------------
    <?php

    //----- Globale Einstellungen ( wird f&uuml;r Anzeige ben&ouml;tigt!)
    ------//
    require("config.php");
    require("includes/functions_charts.php");
    require($PGV_BASE_DIRECTORY.$factsfile["english"]);
    if (file_exists($PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE])) require
    $PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE];

    // -- print html header information
    print_header($name." ".$pgv_lang["descend_chart"]);
    if (strlen($name)<30) $cellwidth="100%";
    else $cellwidth=(strlen($name)*14);
    print "\n\t<table class=\"list_table, $TEXT_DIRECTION\"><tr><td
    width=\"${cellwidth}px\" valign=\"top\">\n\t\t";
    // print "\n\t<h2>".$pgv_lang["descend_chart"].":<br
    />".PrintReady($name)."</h2>";

    //----- HTML- content ----------------//
    echo <<<TEXT
    ------------------------------------------
    (which I desn't understand - but it works)

    I put in this content.php my HTML, including all local style-formats.
    For every new content, I repeate the whole PHP- and CSS-stuff around in
    many content.php's.
    Then I call the content.php's by a menu.php: $submenu["link"] =
    "1th-content.php";

    Of corse, the best way is to split:
    - XHTML-content (a lot of pages)
    - style.css
    - display.php to call the content and the style

    and in the menu.php I call the display.php with a parameter for the
    specific content.html

    But I have no idea HOW to do this...

    Thanks a lot for your support!
    Markus

    if you will have a look:
    http://www.lau-net.de/baerlocher/phpGedView/z_HTML-Test.php
     
    , Apr 24, 2006
    #7
  8. wrote:
    > Dear css-Professionals,
    >
    > thanks a lot for your advices! (and sorry for my switzerland-english)
    >
    > In the last days I read (and understand) a lot about the advantages of
    > CSS.
    > It is easy to split content and style by calling style.css in <head>.
    > Unfortunately my .php doesn't have a "<head>"...
    >
    > The story behind:
    > I use a BIG open-source-prog for genealogy.
    > I try to append it to a "small CMS" (for this I need the
    > "2-column-layout").
    > Of corse it will be VERY much better with css!
    >
    > But in the .php which does my things, there is no <head> where I could
    > link-in the .css
    > Alternatively I tried this "table-working-around".
    >
    > I now something about HTML, and now a little about CSS - but nothing
    > about PHP.
    > I use the given content.php, and customyse it after:
    >
    > echo <<<TEXT
    >
    > with some HTML-code.
    >
    > This is bevore "echo <<<TEXT":
    > ----------------------------------
    > <?php
    >
    > //----- Globale Einstellungen ( wird f&uuml;r Anzeige ben&ouml;tigt!)
    > ------//
    > require("config.php");
    > require("includes/functions_charts.php");
    > require($PGV_BASE_DIRECTORY.$factsfile["english"]);
    > if (file_exists($PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE])) require
    > $PGV_BASE_DIRECTORY . $factsfile[$LANGUAGE];
    >
    > // -- print html header information
    > print_header($name." ".$pgv_lang["descend_chart"]);
    > if (strlen($name)<30) $cellwidth="100%";
    > else $cellwidth=(strlen($name)*14);
    > print "\n\t<table class=\"list_table, $TEXT_DIRECTION\"><tr><td
    > width=\"${cellwidth}px\" valign=\"top\">\n\t\t";
    > // print "\n\t<h2>".$pgv_lang["descend_chart"].":<br
    > />".PrintReady($name)."</h2>";
    >
    > //----- HTML- content ----------------//
    > echo <<<TEXT
    > ------------------------------------------
    > (which I desn't understand - but it works)
    >
    > I put in this content.php my HTML, including all local style-formats.
    > For every new content, I repeate the whole PHP- and CSS-stuff around in
    > many content.php's.
    > Then I call the content.php's by a menu.php: $submenu["link"] =
    > "1th-content.php";
    >
    > Of corse, the best way is to split:
    > - XHTML-content (a lot of pages)
    > - style.css
    > - display.php to call the content and the style
    >
    > and in the menu.php I call the display.php with a parameter for the
    > specific content.html
    >
    > But I have no idea HOW to do this...
    >
    > Thanks a lot for your support!
    > Markus
    >
    > if you will have a look:
    > http://www.lau-net.de/baerlocher/phpGedView/z_HTML-Test.php
    >

    Verdammt! Kompliziert, na?

    --
    You can't fool me: there ain't no Sanity Clause - Chico Marx

    www.geocities.com/Athens/Agora/1955
     
    Martin Edwards, Apr 25, 2006
    #8
  9. Guest

    Please, who may tell me, how it works to build in a special.css in my
    ..php who does not have something like <head>?

    thanks a lot!
    Markus
     
    , Apr 27, 2006
    #9
    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. Eric
    Replies:
    4
    Views:
    748
    clintonG
    Dec 24, 2004
  2. Guybrush Threepwood

    Table-based layout to CSS layout

    Guybrush Threepwood, Jun 6, 2006, in forum: HTML
    Replies:
    20
    Views:
    1,034
  3. Replies:
    1
    Views:
    603
    John Timney \(MVP\)
    Jun 19, 2006
  4. Habib

    Css-Layout vs Table-Layout

    Habib, Jun 19, 2006, in forum: HTML
    Replies:
    15
    Views:
    1,030
    Wÿrm
    Jun 20, 2006
  5. sso
    Replies:
    6
    Views:
    606
    Roedy Green
    Apr 30, 2009
Loading...

Share This Page