Html Table to Css div

Discussion in 'HTML' started by WD, Aug 15, 2004.

  1. WD

    WD Guest

    Hi all,
    I've been try to convert an html table to div(s), but i can't seem to
    keep the same look? Here's the table:

    <table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
    border=0>
    <tbody>
    <tr>
    <td>
    <table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
    border=0>
    <tbody>
    <tr>
    <td align=middle background="images/m.jpg">
    <div align="center"><b>Auto</b></div>
    </td>
    </tr>
    <tr valign=top>
    <td bgcolor=#FFFFFF>
    <div align="center">
    <a href="link.html">link</a><br>
    <a href="link.html">link</a><br>
    <a href="link.html">link</a><br>
    <a href="link.html">link</a><br>
    <a href="link.html">link</a><br>
    <a href="link.html">link</a>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    WD, Aug 15, 2004
    #1
    1. Advertising

  2. WD

    WebcastMaker Guest

    In article <>,
    says...
    > I've been try to convert an html table to div(s), but i can't seem to
    > keep the same look? Here's the table:


    well,since the table does it the way you want, wouldn't it have been
    better to post BOTH sets of code? Or even better yet, post URLs
    --
    WebcastMaker
    Webcasting for free
    http://www.webentations.com
    WebcastMaker, Aug 15, 2004
    #2
    1. Advertising

  3. WD

    WD Guest

    Sorry, here is the Div code:

    <style type="text/css">

    #box {
    width: 164px;
    padding: 0;
    background-color: #b6cce1;
    }

    #box1 {
    width: 164px;
    padding: 0;
    background-image:url('images/m.jpg');
    background-repeat:no-repeat;
    background-position:center;
    height:23px;
    width:164px;
    background-color: #b6cce1;
    }

    .box2 {
    width: 162px;
    padding: 0;
    background-color: #FFFFFF;
    }

    </style>

    <DIV id="box">
    <DIV id="box1" align="center">
    <b>Auto</b>
    </DIV>

    <DIV align="center" class="box2">
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    </DIV>
    </DIV>



    "WebcastMaker" <> wrote in message
    news:...
    > In article <>,
    > says...
    > > I've been try to convert an html table to div(s), but i can't seem

    to
    > > keep the same look? Here's the table:

    >
    > well,since the table does it the way you want, wouldn't it have been
    > better to post BOTH sets of code? Or even better yet, post URLs
    > --
    > WebcastMaker
    > Webcasting for free
    > http://www.webentations.com
    WD, Aug 15, 2004
    #3
  4. WD

    Sam Hughes Guest

    "WD" <> wrote in
    news::

    > Hi all,
    > I've been try to convert an html table to div(s), but i can't
    > seem to
    > keep the same look? Here's the table:
    >
    > [...]


    Use the following: The doctype is necessary for IE 6 to work.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    "http://www.w3.org/TR/REC-html40/strict.dtd">
    <html>
    <head>
    <title>test</title>
    <style type="text/css">
    <!--
    #box {
    padding: 2px;
    background: #336;
    width: 10.5em;
    margin-left: auto;
    margin-right: auto;
    }
    #box1 {
    text-align: center;
    font-weight: bold;
    background: #336 url(images/m.jpg) no-repeat center top;
    height: 1.4em;
    color: black;
    margin: 2px;
    }
    ..box2 {
    margin: 0;
    background: #FFF;
    text-align: center;
    }
    -->
    </style>
    </head>

    <body>

    <div id="box">
    <div id="box1">
    Auto
    </div>

    <div class="box2">
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    <a href="Link.html" target="I1">Link</a><br>
    </div>
    </div>

    </body>
    </html>


    --
    How to make it so visitors can't resize your fonts:
    <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    Sam Hughes, Aug 15, 2004
    #4
  5. WD

    WD Guest

    Thank you SO much, absolutely prefect! You a Genuis!



    "Sam Hughes" <> wrote in message
    news:Xns954680BCFAF06hughesrpiedu@130.133.1.4...
    > "WD" <> wrote in
    > news::
    >
    > > Hi all,
    > > I've been try to convert an html table to div(s), but i can't
    > > seem to
    > > keep the same look? Here's the table:
    > >
    > > [...]

    >
    > Use the following: The doctype is necessary for IE 6 to work.
    >
    > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
    > "http://www.w3.org/TR/REC-html40/strict.dtd">
    > <html>
    > <head>
    > <title>test</title>
    > <style type="text/css">
    > <!--
    > #box {
    > padding: 2px;
    > background: #336;
    > width: 10.5em;
    > margin-left: auto;
    > margin-right: auto;
    > }
    > #box1 {
    > text-align: center;
    > font-weight: bold;
    > background: #336 url(images/m.jpg) no-repeat center top;
    > height: 1.4em;
    > color: black;
    > margin: 2px;
    > }
    > .box2 {
    > margin: 0;
    > background: #FFF;
    > text-align: center;
    > }
    > -->
    > </style>
    > </head>
    >
    > <body>
    >
    > <div id="box">
    > <div id="box1">
    > Auto
    > </div>
    >
    > <div class="box2">
    > <a href="Link.html" target="I1">Link</a><br>
    > <a href="Link.html" target="I1">Link</a><br>
    > <a href="Link.html" target="I1">Link</a><br>
    > <a href="Link.html" target="I1">Link</a><br>
    > <a href="Link.html" target="I1">Link</a><br>
    > <a href="Link.html" target="I1">Link</a><br>
    > </div>
    > </div>
    >
    > </body>
    > </html>
    >
    >
    > --
    > How to make it so visitors can't resize your fonts:
    > <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    WD, Aug 15, 2004
    #5
  6. WD

    WebcastMaker Guest

    In article <>,
    says...
    > Thank you SO much, absolutely prefect! You a Genuis!


    Oh great.... Now his head is about to explode....
    --
    WebcastMaker
    Webcasting for free
    http://www.webentations.com
    WebcastMaker, Aug 15, 2004
    #6
  7. WD wrote:
    > Hi all,
    > I've been try to convert an html table to div(s), but i can't seem to
    > keep the same look? Here's the table:
    > <snip long HTML>


    Could you give a URL to a page showing the layout you want?
    Leif K-Brooks, Aug 15, 2004
    #7
  8. WD

    Spartanicus Guest

    "WD" <> wrote:

    >Hi all,
    > I've been try to convert an html table to div(s),


    Hmmm :-/

    >Here's the table:
    >
    ><table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
    >border=0>
    > <tbody>
    > <tr>
    > <td>
    > <table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
    >border=0>
    > <tbody>
    > <tr>
    > <td align=middle background="images/m.jpg">
    > <div align="center"><b>Auto</b></div>
    > </td>
    > </tr>
    > <tr valign=top>
    > <td bgcolor=#FFFFFF>
    > <div align="center">
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a>
    > </div>
    > </td>
    > </tr>
    > </tbody>
    > </table>
    > </td>
    > </tr>
    > </tbody>
    > </table>


    That looks like a list of links, mark them up accordingly instead of
    replacing one type of incorrect markup with another type of incorrect
    markup.

    --
    Spartanicus
    Spartanicus, Aug 15, 2004
    #8
  9. On Sun, 15 Aug 2004 11:23:03 -0400, WD <> wrote:

    > Hi all,
    > I've been try to convert an html table to div(s), but i can't seem to
    > keep the same look? Here's the table:
    >
    > <table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
    > border=0>
    > <tbody>
    > <tr>
    > <td>
    > <table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
    > border=0>
    > <tbody>
    > <tr>
    > <td align=middle background="images/m.jpg">
    > <div align="center"><b>Auto</b></div>
    > </td>
    > </tr>
    > <tr valign=top>
    > <td bgcolor=#FFFFFF>
    > <div align="center">
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a>
    > </div>
    > </td>
    > </tr>
    > </tbody>
    > </table>
    > </td>
    > </tr>
    > </tbody>
    > </table>


    It's a shame that currently most browsers doesn't support CSS element
    display: table-row, table-cell etc. It would really simplify things when a
    specific site doesn't need to work with older browsers.

    --
    Jari Lehtinen
    http://www.jarilehtinen.net
    Jari Lehtinen, Aug 15, 2004
    #9
  10. WD

    Spartanicus Guest

    "Jari Lehtinen" <> wrote:

    >It's a shame that currently most browsers doesn't support CSS element
    >display: table-row, table-cell etc.


    Most browsers do, IE doesn't.

    --
    Spartanicus
    Spartanicus, Aug 15, 2004
    #10
  11. On Sun, 15 Aug 2004 20:16:43 +0100, Spartanicus <> wrote:

    > "Jari Lehtinen" <> wrote:
    >
    >> It's a shame that currently most browsers doesn't support CSS element
    >> display: table-row, table-cell etc.

    >
    > Most browsers do, IE doesn't.


    That was what I meant. :)

    As in unfortunately IE is still most commonly used browser...

    --
    Jari Lehtinen
    http://www.jarilehtinen.net
    Jari Lehtinen, Aug 15, 2004
    #11
  12. WD

    Toby Inkster Guest

    Spartanicus wrote:
    > "Jari Lehtinen" <> wrote:
    >
    >>It's a shame that currently most browsers doesn't support CSS element
    >>display: table-row, table-cell etc.

    >
    > Most browsers do, IE doesn't.


    For every browser you can name that does, I bet I can name two that don't. ;-)

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Now Playing ~ ./semisonic/feeling_strangely_fine/07_completely_pleased.ogg
    Toby Inkster, Aug 15, 2004
    #12
  13. WD

    Sam Hughes Guest

    "WD" <> wrote in news:WqGdnZwEzdIoC4LcRVn-
    :

    > Thank you SO much, absolutely prefect! You [invented] a Genuis!


    [edited quote so it made sense]

    I am _not_ a prefect and I have _not_ invented a Genuis, whatever that
    thing may be.

    ;)

    --
    How to make it so visitors can't resize your fonts:
    <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    Sam Hughes, Aug 15, 2004
    #13
  14. WD

    Sam Hughes Guest

    Toby Inkster <> wrote in
    news:p:

    > Spartanicus wrote:
    >> "Jari Lehtinen" <> wrote:
    >>
    >>>It's a shame that currently most browsers doesn't support CSS
    >>>element display: table-row, table-cell etc.

    >>
    >> Most browsers do, IE doesn't.

    >
    > For every browser you can name that does, I bet I can name two that
    > don't. ;-)


    Ok.

    Match up two browsers for each one of these:

    The latest nightly build of Mozilla for Windows.
    The second-latest nightly build of Mozilla for Windows.
    The third-latest nightly build of Mozilla for Windows.
    ...
    The thousandth-latest nightly build of Mozilla for Windows.
    ...


    The latest nightly build of Mozilla for Linux.
    ...
    ...
    ...

    ....Phoenix, Windows.
    ....Phoenix, Linux.

    ....*, *nix
    ....*, *nux
    ....*, *SD

    --
    How to make it so visitors can't resize your fonts:
    <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    Sam Hughes, Aug 15, 2004
    #14
  15. WD

    Toby Inkster Guest

    Sam Hughes wrote:

    > Match up two browsers for each one of these:
    >
    > The latest nightly build of Mozilla for Windows.
    > The second-latest nightly build of Mozilla for Windows.


    I didn't say browser *versions*. I said browsers.

    And if you want to play that game there's plenty of scope for nightly
    builds of Konqueror, Lynx, Dillo, Nautilus, etc...

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Aug 15, 2004
    #15
  16. WD

    Sam Hughes Guest

    Toby Inkster <> wrote in
    news:p:

    > Sam Hughes wrote:
    >
    >> Match up two browsers for each one of these:
    >>
    >> The latest nightly build of Mozilla for Windows.
    >> The second-latest nightly build of Mozilla for Windows.

    >
    > I didn't say browser *versions*. I said browsers.


    Well "browsers" can mean many things to and by different people.

    It can refer to installations of browsers, so that the statement, "More
    browsers are named Internet Explorer than any other name," would be
    true.

    It can refer to various browser products, which you now say is what you
    mean. "Most browsers do not understand CSS" would be true in that
    regard.

    And of course, you could twist that meaning to mean that each _build_
    is a different browser. :) And going by that logic even further, every
    separate _configuration_ represents a different browser. :O

    Of course, all Web browsers are just convoluted algorithms. What if I
    gradually change Mozilla so that every aspect is done using an
    algorithm that is different in some respect. Is the browser still a
    Mozilla browser? :)

    --
    How to make it so visitors can't resize your fonts:
    <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    Sam Hughes, Aug 15, 2004
    #16
  17. WD

    WebcastMaker Guest

    In article <Xns9546B3D10D9D5hughesrpiedu@130.133.1.4>,
    says...
    > > I didn't say browser *versions*. I said browsers.

    > Well "browsers" can mean many things to and by different people.


    Nope, got to go with Toby on this one. It was completely apparent what
    Browser was supposed to mean.
    --
    WebcastMaker
    Webcasting for free
    http://www.webentations.com
    WebcastMaker, Aug 16, 2004
    #17
  18. WD

    Sam Hughes Guest

    WebcastMaker <> wrote in
    news::

    > In article <Xns9546B3D10D9D5hughesrpiedu@130.133.1.4>,
    > says...
    >> > I didn't say browser *versions*. I said browsers.

    >> Well "browsers" can mean many things to and by different people.

    >
    > Nope, got to go with Toby on this one. It was completely apparent
    > what Browser was supposed to mean.


    Hello, we stopped talking seriously about five posts up the thread.

    --
    How to make it so visitors can't resize your fonts:
    <http://www.rpi.edu/~hughes/www/wise_guy/unresizable_text.html>
    Sam Hughes, Aug 16, 2004
    #18
  19. WD

    WebcastMaker Guest

    In article <Xns9546DE2888D4Fhughesrpiedu@130.133.1.4>,
    says...
    > >> > I didn't say browser *versions*. I said browsers.
    > >> Well "browsers" can mean many things to and by different people.

    > > Nope, got to go with Toby on this one. It was completely apparent
    > > what Browser was supposed to mean.

    > Hello, we stopped talking seriously about five posts up the thread.


    ya think?
    --
    WebcastMaker
    Webcasting for free
    http://www.webentations.com
    WebcastMaker, Aug 16, 2004
    #19
  20. WD

    DU Guest

    WD wrote:
    > Hi all,
    > I've been try to convert an html table to div(s), but i can't seem to
    > keep the same look? Here's the table:
    >
    > <table cellspacing=0 cellpadding=1 align=center width=164 bgcolor=#b6cce1
    > border=0>



    You want the content of the table to be centered or you want the table
    itself to be centered within its parent? This is important to know if
    you're going to use CSS.

    > <tbody>
    > <tr>
    > <td>
    > <table cellspacing=1 cellpadding=2 width=164 bgcolor=#333366
    > border=0>


    From the beginning, you've over-constrained your tables. So, there can
    not be any solution to the code you provided.
    The nested table width should have been 162; best was to leave the width
    undefined and then let the normal flow of data prevail.

    > <tbody>
    > <tr>
    > <td align=middle background="images/m.jpg">
    > <div align="center"><b>Auto</b></div>
    > </td>
    > </tr>
    > <tr valign=top>
    > <td bgcolor=#FFFFFF>
    > <div align="center">
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a><br>
    > <a href="link.html">link</a>
    > </div>
    > </td>
    > </tr>
    > </tbody>
    > </table>
    > </td>
    > </tr>
    > </tbody>
    > </table>
    >
    >


    The solution to your problem can be extremely simple if we know
    precisely what you want to begin with. Here, a simple centered paragraph
    and a centered unnumbered list would be an appropriate way to render a
    list of links.

    DU
    DU, Aug 16, 2004
    #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. Paul J. Le Genial

    html/css : table and div problem

    Paul J. Le Genial, Mar 7, 2005, in forum: HTML
    Replies:
    4
    Views:
    562
    Paul J. Le Genial
    Mar 8, 2005
  2. K Viltersten

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

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

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

    Dwayne Madsen, Jun 1, 2005, in forum: Javascript
    Replies:
    1
    Views:
    185
    David Dorward
    Jun 1, 2005
  4. mscir
    Replies:
    3
    Views:
    307
    Martin Honnen
    Jun 26, 2005
  5. sil
    Replies:
    4
    Views:
    283
    Thomas 'PointedEars' Lahn
    Feb 7, 2010
Loading...

Share This Page