Need help converting a table to div/css

Discussion in 'HTML' started by Thierry Lam, Sep 27, 2006.

  1. Thierry Lam

    Thierry Lam Guest

    Can I get some help on how to convert the following table layout into a
    div/css?

    <table>
    <tr>
    <td width='120px'><p>Province: </td>
    <td align='right'>
    <input type='Text' name='province' size='40' maxlength='50'>
    </td>
    </tr>
    <tr>
    <td width='120px'><p>City: </td>
    <td align='right'>
    <input type='Text' name='city' size='40' maxlength='50' >
    </td>
    </tr>
    <tr>
    <td width='120px'><p>Time in: </td>
    <td align='right'>
    <input type='Text' name='inhours' value='' size='2' maxlength='2'>:
    <input type='Text' name='inminutes' value='' size='2'
    maxlength='2'>:
    <input type='Text' name='inseconds' value='' size='2'
    maxlength='2'> (HH:MM:SS)
    </td>
    </tr>
    <tr>
    <td width='120px'><p>Time out: </td>
    <td align='right'>
    <input type='Text' name='outhours' value='' size='2'
    maxlength='2'>:
    <input type='Text' name='outminutes' value='' size='2'
    maxlength='2'>:
    <input type='Text' name='outseconds' value='' size='2'
    maxlength='2'> (HH:MM:SS)
    </td>
    </tr>
    </table>
     
    Thierry Lam, Sep 27, 2006
    #1
    1. Advertising

  2. On 2006-09-27, Thierry Lam wrote:
    > Can I get some help on how to convert the following table layout into a
    > div/css?
    >
    ><table>
    ><tr>
    > <td width='120px'><p>Province: </td>
    > <td align='right'>
    > <input type='Text' name='province' size='40' maxlength='50'>
    > </td>
    ></tr>
    ><tr>
    > <td width='120px'><p>City: </td>
    > <td align='right'>
    > <input type='Text' name='city' size='40' maxlength='50' >
    > </td>
    ></tr>
    ><tr>
    > <td width='120px'><p>Time in: </td>
    > <td align='right'>
    > <input type='Text' name='inhours' value='' size='2' maxlength='2'>:
    > <input type='Text' name='inminutes' value='' size='2'
    > maxlength='2'>:
    > <input type='Text' name='inseconds' value='' size='2'
    > maxlength='2'> (HH:MM:SS)
    > </td>
    ></tr>
    ><tr>
    > <td width='120px'><p>Time out: </td>
    > <td align='right'>
    > <input type='Text' name='outhours' value='' size='2'
    > maxlength='2'>:
    > <input type='Text' name='outminutes' value='' size='2'
    > maxlength='2'>:
    > <input type='Text' name='outseconds' value='' size='2'
    > maxlength='2'> (HH:MM:SS)
    > </td>
    ></tr>
    ></table>



    <head>
    <style type="text/css">
    p {
    margin:0;
    padding: .2em 0;
    }

    p.label {
    width: 6em;
    float: left;
    clear: both;
    }

    p.r {
    margin-left: 7em;
    padding-left: 7em;
    }

    </style>
    </head>
    <body>

    <div id="form">
    <p class="label">Province:</p><p><input type='Text'
    name='province' size='40' maxlength='50'>
    <p class="label">City: </p><p><input type='Text'
    name='city' size='40' maxlength='50' >

    <p class="label">Time in:</p>
    <p class="r"><input type='Text'
    name='inhours' value='' size='2' maxlength='2'>:
    <input type='Text'
    name='inminutes' value='' size='2' maxlength='2'>:
    <input type='Text'
    name='inseconds' value='' size='2' maxlength='2'> (HH:MM:SS)

    <p class="label">Time out:</p>
    <p class="r"><input type='Text'
    name='inhours' value='' size='2' maxlength='2'>:
    <input type='Text'
    name='inminutes' value='' size='2' maxlength='2'>:
    <input type='Text'
    name='inseconds' value='' size='2' maxlength='2'> (HH:MM:SS)
    </div>


    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Sep 27, 2006
    #2
    1. Advertising

  3. On 2006-09-27, Chris F.A. Johnson wrote:
    > On 2006-09-27, Thierry Lam wrote:
    >> Can I get some help on how to convert the following table layout into a
    >> div/css?
    >>
    >><table>
    >><tr>
    >> <td width='120px'><p>Province: </td>
    >> <td align='right'>
    >> <input type='Text' name='province' size='40' maxlength='50'>
    >> </td>
    >></tr>
    >><tr>
    >> <td width='120px'><p>City: </td>
    >> <td align='right'>
    >> <input type='Text' name='city' size='40' maxlength='50' >
    >> </td>
    >></tr>
    >><tr>
    >> <td width='120px'><p>Time in: </td>
    >> <td align='right'>
    >> <input type='Text' name='inhours' value='' size='2' maxlength='2'>:
    >> <input type='Text' name='inminutes' value='' size='2'
    >> maxlength='2'>:
    >> <input type='Text' name='inseconds' value='' size='2'
    >> maxlength='2'> (HH:MM:SS)
    >> </td>
    >></tr>
    >><tr>
    >> <td width='120px'><p>Time out: </td>
    >> <td align='right'>
    >> <input type='Text' name='outhours' value='' size='2'
    >> maxlength='2'>:
    >> <input type='Text' name='outminutes' value='' size='2'
    >> maxlength='2'>:
    >> <input type='Text' name='outseconds' value='' size='2'
    >> maxlength='2'> (HH:MM:SS)
    >> </td>
    >></tr>
    >></table>

    >
    >
    ><head>
    ><style type="text/css">
    > p {
    > margin:0;
    > padding: .2em 0;
    > }
    >
    > p.label {
    > width: 6em;
    > float: left;
    > clear: both;
    > }


    In IE, the two look the same without this next section:

    > p.r {
    > margin-left: 7em;
    > padding-left: 7em;
    > }


    ></style>
    ></head>
    ><body>
    >
    ><div id="form">
    > <p class="label">Province:</p><p><input type='Text'
    > name='province' size='40' maxlength='50'>
    > <p class="label">City: </p><p><input type='Text'
    > name='city' size='40' maxlength='50' >
    >
    > <p class="label">Time in:</p>
    > <p class="r"><input type='Text'
    > name='inhours' value='' size='2' maxlength='2'>:
    > <input type='Text'
    > name='inminutes' value='' size='2' maxlength='2'>:
    > <input type='Text'
    > name='inseconds' value='' size='2' maxlength='2'> (HH:MM:SS)
    >
    > <p class="label">Time out:</p>
    > <p class="r"><input type='Text'
    > name='inhours' value='' size='2' maxlength='2'>:
    > <input type='Text'
    > name='inminutes' value='' size='2' maxlength='2'>:
    > <input type='Text'
    > name='inseconds' value='' size='2' maxlength='2'> (HH:MM:SS)
    ></div>
    >
    >



    --
    Chris F.A. Johnson <http://cfaj.freeshell.org>
    ===================================================================
    Author:
    Shell Scripting Recipes: A Problem-Solution Approach (2005, Apress)
     
    Chris F.A. Johnson, Sep 27, 2006
    #3
  4. Thierry Lam

    GreatDomainz Guest

    Thierry Lam wrote:
    > Can I get some help on how to convert the following table layout into a
    > div/css?
    >
    > <table>
    > <tr>
    > <td width='120px'><p>Province: </td>
    > <td align='right'>
    > <input type='Text' name='province' size='40' maxlength='50'>
    > </td>
    > </tr>
    > <tr>
    > <td width='120px'><p>City: </td>
    > <td align='right'>
    > <input type='Text' name='city' size='40' maxlength='50' >
    > </td>
    > </tr>
    > <tr>
    > <td width='120px'><p>Time in: </td>
    > <td align='right'>
    > <input type='Text' name='inhours' value='' size='2' maxlength='2'>:
    > <input type='Text' name='inminutes' value='' size='2'
    > maxlength='2'>:
    > <input type='Text' name='inseconds' value='' size='2'
    > maxlength='2'> (HH:MM:SS)
    > </td>
    > </tr>
    > <tr>
    > <td width='120px'><p>Time out: </td>
    > <td align='right'>
    > <input type='Text' name='outhours' value='' size='2'
    > maxlength='2'>:
    > <input type='Text' name='outminutes' value='' size='2'
    > maxlength='2'>:
    > <input type='Text' name='outseconds' value='' size='2'
    > maxlength='2'> (HH:MM:SS)
    > </td>
    > </tr>
    > </table>


    Chris beat me to it, but I'd already typed it up so I guess i'll post
    anyway... this example uses a 600 pixel table width.


    In the CSS file...


    /* Table
    ----- */

    ..thetable {width:600px;}


    /* Rows
    ---- */

    ..therows {clear:left}


    /* cells
    ----- */

    ..cellone {width:120px;float:left;}
    ..celltwo {width:560px;float:right;text-align:right;}



    Then in your page...


    <div class="thetable">
    <div class="therows"><div class="cellone">Cell One Content</div><div
    class="celltwo">Cell Two Content</div></div>
    <div class="therows"><div class="cellone">Cell One Content</div><div
    class="celltwo">Cell Two Content</div></div>
    <div class="therows"><div class="cellone">Cell One Content</div><div
    class="celltwo">Cell Two Content</div></div>
    </div>



    The widths and names I used are just an example and you can always add
    padding/color etc to the cells and rows. I just tried to keep it
    simple to give you a good starting point. If you're using a fluid
    design, you can use a similar format, and just swap out the pixel
    widths with percentages.

    Hope this helped,

    Don.


    -------------------------------------------------------------------
    http://www.makemoney.ms - Just one idea...
    -------------------------------------------------------------------
     
    GreatDomainz, Sep 27, 2006
    #4
  5. Thierry Lam

    Toby Inkster Guest

    Chris F.A. Johnson wrote:

    > <p class="label">...</p>


    Yucky.

    <p class="labelholder"><label for="some_id">...</label></p>

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Sep 27, 2006
    #5
  6. Thierry Lam

    Bergamot Guest

    Chris F.A. Johnson wrote:
    > <p class="label">Province:</p><p><input type='Text'
    > name='province' size='40' maxlength='50'>


    um, why don't you just use the <label> element?
    Seems to me, that's what it's for...

    --
    Berg
     
    Bergamot, Sep 27, 2006
    #6
  7. Thierry Lam wrote:

    > Can I get some help on how to convert the following table layout into
    > a div/css?


    And then this question: isn't your example actual tabular data? For
    which a table is designed? It even looks like .. um .. a "timetable!"

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 27, 2006
    #7
  8. Thierry Lam

    GreatDomainz Guest

    Beauregard T. Shagnasty wrote:
    > Thierry Lam wrote:
    >
    > > Can I get some help on how to convert the following table layout into
    > > a div/css?

    >
    > And then this question: isn't your example actual tabular data? For
    > which a table is designed? It even looks like .. um .. a "timetable!"
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck.


    lmao. Got a good chuckle out of that... thanks.

    Don.
     
    GreatDomainz, Sep 27, 2006
    #8
  9. Thierry Lam

    Thierry Lam Guest

    You might be right, I've been too focused to remove table layout from
    my web pages that I forgot to leave actual tables where they should be.


    Beauregard T. Shagnasty wrote:
    > Thierry Lam wrote:
    >
    > > Can I get some help on how to convert the following table layout into
    > > a div/css?

    >
    > And then this question: isn't your example actual tabular data? For
    > which a table is designed? It even looks like .. um .. a "timetable!"
    >
    > --
    > -bts
    > -Motorcycles defy gravity; cars just suck.
     
    Thierry Lam, Sep 27, 2006
    #9
  10. Thierry Lam wrote:

    > Beauregard T. Shagnasty wrote:
    >> Thierry Lam wrote:
    >>
    >>> Can I get some help on how to convert the following table layout into
    >>> a div/css?

    >>
    >> And then this question: isn't your example actual tabular data? For
    >> which a table is designed? It even looks like .. um .. a "timetable!"

    >
    > You might be right, I've been too focused to remove table layout from
    > my web pages that I forgot to leave actual tables where they should
    > be.


    Yup, sometimes you get too close to the forest.

    All my sites have tables ... but only where there is real tabular data.
    Otherwise, nary a table (for layout) can be found anywhere.

    [Please note that replies go down here instead of on top. Thanks.]

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 28, 2006
    #10
  11. Thierry Lam

    dorayme Guest

    In article
    <uMDSg.238606$>,
    "Beauregard T. Shagnasty" <> wrote:

    > All my sites have tables ... but only where there is real tabular data.
    > Otherwise, nary a table (for layout) can be found anywhere.


    Can you please stop making these statements as it causes me
    distress from guilt. I am not making new tables for layout in
    spite of a few arguments that rattle around my brain saying some
    of it is justified... but I have yet to go though a lot of stuff
    and be rid of the remaining table structures.

    --
    dorayme
     
    dorayme, Sep 28, 2006
    #11
  12. dorayme wrote:

    > "Beauregard T. Shagnasty" <> wrote:
    >> All my sites have tables ... but only where there is real tabular
    >> data. Otherwise, nary a table (for layout) can be found anywhere.

    >
    > Can you please stop making these statements as it causes me distress
    > from guilt. I am not making new tables for layout in spite of a few
    > arguments that rattle around my brain saying some of it is
    > justified... but I have yet to go though a lot of stuff and be rid of
    > the remaining table structures.


    LOL! Distress? Take two aspirin and call me in the morning.

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 28, 2006
    #12
  13. "Beauregard T. Shagnasty" <> skrev i meddelandet
    news:ywESg.238908$...
    > dorayme wrote:
    >
    > > "Beauregard T. Shagnasty" <> wrote:
    > >> All my sites have tables ... but only where there is real tabular
    > >> data. Otherwise, nary a table (for layout) can be found anywhere.

    > >
    > > Can you please stop making these statements as it causes me distress
    > > from guilt. I am not making new tables for layout in spite of a few
    > > arguments that rattle around my brain saying some of it is
    > > justified... but I have yet to go though a lot of stuff and be rid of
    > > the remaining table structures.

    >
    > LOL! Distress? Take two aspirin and call me in the morning.



    By the way, as far as I remember, you wrote that you had been in Rome.
    Well,
    did you read this (in Swedish about something happening in Italy)?
    http://www.dn.se/DNet/jsp/polopoly.jsp?d=148&a=576007&previousRenderType=6


    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/sv/boende-i-italien.php
    你会说文言马 ?
     
    Luigi Donatello Asero, Sep 28, 2006
    #13
  14. Beauregard T. Shagnasty, Sep 28, 2006
    #14
  15. "Beauregard T. Shagnasty" <> skrev i meddelandet
    news:qSESg.132410$...
    > Luigi Donatello Asero wrote:
    >
    > > By the way, as far as I remember, you wrote that you had been in Rome.

    >
    > Me?


    Did you not write that some weeks ago?
    Perhaps did you make a joke?
    > > Well, did you read this (in Swedish about something happening in
    > > Italy)?
    > >

    http://www.dn.se/DNet/jsp/polopoly.jsp?d=148&a=576007&previousRenderType=6
    >
    > Sorry, I don't read Swedish.


    Ok.
    But there are probably other people who do it.
    I do not translate it here because I think that it is copyrighted.
    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/sv/boende-i-italien.php
    你会说文言马 ?
     
    Luigi Donatello Asero, Sep 28, 2006
    #15
  16. Luigi Donatello Asero wrote:

    > "Beauregard T. Shagnasty" <>
    >> Luigi Donatello Asero wrote:
    >>> By the way, as far as I remember, you wrote that you had been in Rome.

    >>
    >> Me?

    >
    > Did you not write that some weeks ago?
    > Perhaps did you make a joke?


    Perhaps ...

    --
    -bts
    -Motorcycles defy gravity; cars just suck.
     
    Beauregard T. Shagnasty, Sep 28, 2006
    #16
  17. Thierry Lam

    dorayme Guest

    In article <__ESg.17879$>,
    "Luigi Donatello Asero" <> wrote:

    > I do not translate it here because I think that it is copyrighted.


    And any indication to convey the message in any language other
    than Swedish to a third party can bring in a 10 year jail
    sentence. I don't blame you for being careful.

    --
    dorayme
     
    dorayme, Sep 28, 2006
    #17
  18. "dorayme" <> skrev i meddelandet
    news:...
    > In article <__ESg.17879$>,
    > "Luigi Donatello Asero" <> wrote:
    >
    > > I do not translate it here because I think that it is copyrighted.

    >
    > And any indication to convey the message in any language other
    > than Swedish to a third party can bring in a 10 year jail
    > sentence. I don't blame you for being careful.


    Do you also know which law and paragraph you are referring to?
    --
    Luigi Donatello Asero
    https://www.scaiecat-spa-gigi.com/sv/boende-i-italien.php
    你会说文言马 ?
     
    Luigi Donatello Asero, Sep 28, 2006
    #18
  19. Thierry Lam

    Vaxius Guest

    On Thu, 28 Sep 2006 00:24:41 +0000, Luigi Donatello Asero wrote:

    >
    > "Beauregard T. Shagnasty" <> skrev i meddelandet
    > news:ywESg.238908$...
    >> dorayme wrote:
    >>
    >> > "Beauregard T. Shagnasty" <> wrote:
    >> >> All my sites have tables ... but only where there is real tabular
    >> >> data. Otherwise, nary a table (for layout) can be found anywhere.
    >> >
    >> > Can you please stop making these statements as it causes me distress
    >> > from guilt. I am not making new tables for layout in spite of a few
    >> > arguments that rattle around my brain saying some of it is
    >> > justified... but I have yet to go though a lot of stuff and be rid of
    >> > the remaining table structures.

    >>
    >> LOL! Distress? Take two aspirin and call me in the morning.

    >
    >
    > By the way, as far as I remember, you wrote that you had been in Rome.
    > Well,
    > did you read this (in Swedish about something happening in Italy)?
    > http://www.dn.se/DNet/jsp/polopoly.jsp?d=148&a=576007&previousRenderType=6


    I don't believe it's time to switch to using pure CSS for layouts. My
    reasoning? IE. I could launch off on a tangent about all the retarded
    things IE does with CSS, but the fact remains that over 80% of people on
    the Internet use IE, and I don't want my site butchered it (I did a recent
    check and made a CSS layout for the hell of it, looked great in Firefox
    and Opera, looked absolutely horrible in IE). And though there are hacks
    to get around IE's deficiencies, I can't bring myself to dirty
    up my code like that. Therefore, I believe the ugly tables solution will
    have to do for the immediate future.
     
    Vaxius, Oct 9, 2006
    #19
  20. Thierry Lam

    dorayme Guest

    In article <>,
    Vaxius <> wrote:

    > I don't believe it's time to switch to using pure CSS for layouts. My
    > reasoning? IE. I could launch off on a tangent about all the retarded
    > things IE does with CSS, but the fact remains that over 80% of people on
    > the Internet use IE, and I don't want my site butchered it (I did a recent
    > check and made a CSS layout for the hell of it, looked great in Firefox
    > and Opera, looked absolutely horrible in IE). And though there are hacks
    > to get around IE's deficiencies, I can't bring myself to dirty
    > up my code like that. Therefore, I believe the ugly tables solution will
    > have to do for the immediate future.


    What you will be told here is that you are already dirtying up
    your code with tables, that you should smarten up.

    I am glad you are all cock a hoop about it. I am a defeated
    being, battered by the power of this church, guilt-ridden about
    every layout table I have on old existing sites and the task of
    changing so much is altogether too daunting. It is cheaper to
    feel bad, to skulk about and lie low... occasionally neighbours
    who are probably alt.html church members come out and beat me
    with rolled up old newspapers as I try to sneak past their houses
    early to get the latest daily to read...

    You will feel differently when you get better at providing for IE
    6. You can easily make a separate CSS sheet just for IEs eyes.
    Your reluctance to "dirty up" your "code" sounds to me based on a
    a few misunderstandings. For a start, the HTMl, ideally, will be
    as pure as the driven snow. It is the CSS sheets that are linked
    that can provide the solution. And it is fun. Have you got better
    things to do or something?

    Don't be like that US senator going on about morality but
    secretly doing dirty things anyway. Wise up young Roman! The past
    is the past. But the future is under your control.

    --
    dorayme
     
    dorayme, Oct 9, 2006
    #20
    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. Some One
    Replies:
    5
    Views:
    814
    Toby A Inkster
    Aug 9, 2003
  2. Luigi Donatello Asero

    Re: Need help converting a table to div/css

    Luigi Donatello Asero, Sep 28, 2006, in forum: HTML
    Replies:
    0
    Views:
    446
    Luigi Donatello Asero
    Sep 28, 2006
  3. K Viltersten

    <div ... /> and <div ...></div>

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    754
  4. Dwayne Madsen

    Q: Div A inside Div B is larger than Div B

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    194
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    317
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page