Making a table with divs

Discussion in 'HTML' started by Paul B, Apr 13, 2006.

  1. Paul B

    Paul B Guest

    I understand that using tables is not the 'correct' way to create a
    webpage layout, so I wondered what the general consensus is on using
    div tags to 'simulate' a table:
    http://seventynine.net/testing/test01.html

    It is a very very basic example but I'm sure anyone who has made a
    layout with a table can see the point behind it.
     
    Paul B, Apr 13, 2006
    #1
    1. Advertising

  2. Paul B

    rtconner Guest

    Uhm.. It doesn't work in IE.

    And if you ask me, a table does the job just fine, so why would you try
    to imitate a table when you can just use the actaul thing. And DIV have
    many uses, but this, IMO is not one of them.
     
    rtconner, Apr 13, 2006
    #2
    1. Advertising

  3. On Thu, 13 Apr 2006 23:07:11 +0200, Paul B <>
    wrote:

    > I understand that using tables is not the 'correct' way to create a
    > webpage layout, so I wondered what the general consensus is on using
    > div tags to 'simulate' a table:
    > http://seventynine.net/testing/test01.html


    If you really are serious about leaving tables as a method you use for
    page layout, you should also let go of the 'concept of a table' that is in
    your mind. This page is a lovely example of how the tables are something
    that is very stuck in your head at the moment.

    Create your content. Mark it up properly. That is a heading is a heading,
    a paragraph is a paragraph, a table *is* a table. Et cetera. See what you
    can do with all the elements you have in your page once it is marked up
    properly. You possibly need one or two more handles (to seperate the main
    content from, say, teh navigation meny), but you'll be amazed what you can
    achieve with all there already is in your page.

    > It is a very very basic example but I'm sure anyone who has made a
    > layout with a table can see the point behind it.


    There is no point actually. All those divs. Forget tables and start doing
    things properly.


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
     
    Barbara de Zoete, Apr 13, 2006
    #3
  4. Paul B

    Paul B Guest

    On 13 Apr 2006 14:12:52 -0700
    "rtconner" <> wrote:

    > Uhm.. It doesn't work in IE.
    >
    > And if you ask me, a table does the job just fine, so why would you
    > try to imitate a table when you can just use the actaul thing. And
    > DIV have many uses, but this, IMO is not one of them.
    >


    Ahh, I've not got IE. The table does do it fine but most people seem to
    think the layout of a page shouldn't be done with a table so I was
    thinking of a way to not use one... I think I'll just go back to
    inventing square wheels for my car.
     
    Paul B, Apr 13, 2006
    #4
  5. Paul B

    Good Man Guest

    Paul B <> wrote in news:20060413220711.3a2d7045
    @pear.mshome.net:

    > I understand that using tables is not the 'correct' way to create a
    > webpage layout, so I wondered what the general consensus is on using
    > div tags to 'simulate' a table:
    > http://seventynine.net/testing/test01.html
    >
    > It is a very very basic example but I'm sure anyone who has made a
    > layout with a table can see the point behind it.


    You are correct in stating that using tables for webpage layout is not
    preferred. However, tables are still the preferred choice in displaying
    tabular data (ie: charts, etc)

    I see what you're doing in your example, but I don't know how really
    useful it is. Your code does indeed simulate a table using CSS.
    However, a great deal of the 'exercise' in moving away from table-based
    layout is moving away from the table-based *concept*, not just the table
    tags themselves.

    For example, if I only wanted content to appear in your 'cell' called
    "Bottom right", there is no way I should be required to contemplate
    anything else - i would use one div only, and use CSS to specify how I
    want content presented/laid out.

    Good exercise in scripting/simulating a table, but sort of missing the
    concept of CSS itself in my humble opinion....
     
    Good Man, Apr 13, 2006
    #5
  6. Paul B

    Good Man Guest

    "rtconner" <> wrote in news:1144962772.384111.295510
    @z34g2000cwc.googlegroups.com:

    > Uhm.. It doesn't work in IE.
    >
    > And if you ask me, a table does the job just fine, so why would you try
    > to imitate a table when you can just use the actaul thing. And DIV have
    > many uses, but this, IMO is not one of them.


    hi, time to be bitchy...

    what is your post referring to? you should quote posts that you are
    replying to. it makes it much easier to understand and follow the thread.
     
    Good Man, Apr 13, 2006
    #6
  7. Paul B

    rtconner Guest

    >hi, time to be bitchy...
    >
    >what is your post referring to? you should quote posts that you are
    >replying to. it makes it much easier to understand and follow the thread.


    sorry then. I don't post much and am not fully acquanted with proper
    practice and proceedure. that was just a response to the original post.
    show below.

    >I understand that using tables is not the 'correct' way to create a
    >webpage layout, so I wondered what the general consensus is on using
    >div tags to 'simulate' a table:
    >http://seventynine.net/testing/test01.html
    >
    >It is a very very basic example but I'm sure anyone who has made a
    >layout with a table can see the point behind it.
     
    rtconner, Apr 13, 2006
    #7
  8. Paul B wrote:
    > I understand that using tables is not the 'correct' way to create a
    > webpage layout, so I wondered what the general consensus is on using
    > div tags to 'simulate' a table:
    > http://seventynine.net/testing/test01.html
    >
    > It is a very very basic example but I'm sure anyone who has made a
    > layout with a table can see the point behind it.


    I am absolutely amazed how often this topic appears when it is so often
    very well answered as in this thread. It does not seem to be to
    difficult a concept to wrap ones mind around but yet the misconceptions
    that *all* tables are bad persists!

    <soapbox>
    Okay maybe folks cannot recognized what the difference between tabular
    data and layout framework is, so here it goes...

    Tables are for tabular data, information that when organized in rows and
    columns, where by such physical organization, has some purpose in
    interpreting the data.

    WORK OUTPUT
    ===========
    CHIEFS
    | 1 | 5 | 10 |
    --+----+----+----+
    10|100 | 15 | 5 |
    --+----+----+----+
    INDIANS 5| 85 | 25 | 3 |
    --+----+----+----+
    1| 65 | 50 | 0 |
    --+----+----+----+

    However if you are using a table to place a bit of data in a specific
    location in the viewport, that is presentation! In this situation ask
    yourself why do you want that bit of text there and I bet your answer
    will be: "Cuz it looks good"! That *is* presentation!

    Do *not* use a table to "hang" bits of your webpage's content in
    specific places within the viewport. Use CSS. The real advantage of CSS
    over tables becomes very clear when your decide later on that your do
    not like your navbar on the upper left corner of your webpage but wish
    it on the upper right, (Oh yes! Navbars are *NOT* tabular data, unless
    the pages relate to say dates on a calender and the links are
    understandably place in a table that resembles a page of a calender).

    If you use a table you must edit your html (possible many many times
    depending on how many pages are effected on your site) whereas if done
    properly may only require one single change to a stylesheet to make the
    change to your entire site!

    Again to be clear: if you're using a table to place to bits here and
    there on the page "'cuz it looks good"--STOP! If you are doing it to
    arrange info in rows and columns because is has a "this vs. that"
    relationship then by all means!
    </soapbox>

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 13, 2006
    #8
  9. Paul B

    dorayme Guest

    In article <Xns97A4B0AC75108sonicyouth@216.196.97.131>,
    Good Man <> wrote:

    > "rtconner" <> wrote in news:1144962772.384111.295510
    > @z34g2000cwc.googlegroups.com:
    >
    > > Uhm.. It doesn't work in IE.
    > >
    > > And if you ask me, a table does the job just fine, so why would you try
    > > to imitate a table when you can just use the actaul thing. And DIV have
    > > many uses, but this, IMO is not one of them.

    >
    > hi, time to be bitchy...
    >
    > what is your post referring to? you should quote posts that you are
    > replying to. it makes it much easier to understand and follow the thread.


    That is bitchy? You gentle lamb you...

    --
    dorayme
     
    dorayme, Apr 14, 2006
    #9
  10. Paul B

    Neredbojias Guest

    To further the education of mankind, "rtconner" <>
    declaimed:

    > Uhm.. It doesn't work in IE.


    What does?

    > And if you ask me, a table does the job just fine, so why would you try
    > to imitate a table when you can just use the actaul thing. And DIV have
    > many uses, but this, IMO is not one of them.


    Agreed.

    --
    Neredbojias
    Infinity can have limits.
     
    Neredbojias, Apr 14, 2006
    #10
  11. Paul B

    Wings Guest

    "Good Man" <> wrote in message
    news:Xns97A4B0AC75108sonicyouth@216.196.97.131...
    > "rtconner" <> wrote in news:1144962772.384111.295510
    > @z34g2000cwc.googlegroups.com:
    >
    >> Uhm.. It doesn't work in IE.
    >>
    >> And if you ask me, a table does the job just fine, so why would you try
    >> to imitate a table when you can just use the actaul thing. And DIV have
    >> many uses, but this, IMO is not one of them.

    >
    > hi, time to be bitchy...
    >
    > what is your post referring to? you should quote posts that you are
    > replying to. it makes it much easier to understand and follow the thread.


    Maybe, but isn't that what the message heirarchy structure is designed to
    show? No problems here in following this. (Just being bitchy).
     
    Wings, Apr 14, 2006
    #11
  12. Wings wrote:
    > "Good Man" <> wrote in message

    <snip>
    >> what is your post referring to? you should quote posts that you are
    >> replying to. it makes it much easier to understand and follow the thread.

    >
    > Maybe, but isn't that what the message heirarchy structure is designed to
    > show? No problems here in following this. (Just being bitchy).
    >
    >


    If you are using a newsreader and not Google, the previous messages are
    not shown together in one column of text, you must traverse the thread
    tree which on some threads can get quite complicated and dendritic. It
    also aids in the conversions with quoting to highlight exactly what you
    are responding to, as I have done here!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 14, 2006
    #12
  13. Paul B

    rtconner Guest

    Thats great and all. But not how do you do this practically? IE and
    Mozilla fight over so many CSS options that displaying anything the
    same in both of them is a pain. I'm trying to set up a simple layout of
    putting a few divs/spans next to each other and have been working on it
    for hours (about to be days) and have not found a crossbrowser
    solution.


    Jonathan N. Little wrote:
    > Paul B wrote:
    > > I understand that using tables is not the 'correct' way to create a
    > > webpage layout, so I wondered what the general consensus is on using
    > > div tags to 'simulate' a table:
    > > http://seventynine.net/testing/test01.html
    > >
    > > It is a very very basic example but I'm sure anyone who has made a
    > > layout with a table can see the point behind it.

    >
    > I am absolutely amazed how often this topic appears when it is so often
    > very well answered as in this thread. It does not seem to be to
    > difficult a concept to wrap ones mind around but yet the misconceptions
    > that *all* tables are bad persists!
    >
    > <soapbox>
    > Okay maybe folks cannot recognized what the difference between tabular
    > data and layout framework is, so here it goes...
    >
    > Tables are for tabular data, information that when organized in rows and
    > columns, where by such physical organization, has some purpose in
    > interpreting the data.
    >
    > WORK OUTPUT
    > ===========
    > CHIEFS
    > | 1 | 5 | 10 |
    > --+----+----+----+
    > 10|100 | 15 | 5 |
    > --+----+----+----+
    > INDIANS 5| 85 | 25 | 3 |
    > --+----+----+----+
    > 1| 65 | 50 | 0 |
    > --+----+----+----+
    >
    > However if you are using a table to place a bit of data in a specific
    > location in the viewport, that is presentation! In this situation ask
    > yourself why do you want that bit of text there and I bet your answer
    > will be: "Cuz it looks good"! That *is* presentation!
    >
    > Do *not* use a table to "hang" bits of your webpage's content in
    > specific places within the viewport. Use CSS. The real advantage of CSS
    > over tables becomes very clear when your decide later on that your do
    > not like your navbar on the upper left corner of your webpage but wish
    > it on the upper right, (Oh yes! Navbars are *NOT* tabular data, unless
    > the pages relate to say dates on a calender and the links are
    > understandably place in a table that resembles a page of a calender).
    >
    > If you use a table you must edit your html (possible many many times
    > depending on how many pages are effected on your site) whereas if done
    > properly may only require one single change to a stylesheet to make the
    > change to your entire site!
    >
    > Again to be clear: if you're using a table to place to bits here and
    > there on the page "'cuz it looks good"--STOP! If you are doing it to
    > arrange info in rows and columns because is has a "this vs. that"
    > relationship then by all means!
    > </soapbox>
    >
    > --
    > Take care,
    >
    > Jonathan
    > -------------------
    > LITTLE WORKS STUDIO
    > http://www.LittleWorksStudio.com
     
    rtconner, Apr 14, 2006
    #13
  14. rtconner wrote:
    > Thats great and all. But not how do you do this practically? IE and
    > Mozilla fight over so many CSS options that displaying anything the
    > same in both of them is a pain.


    Mozilla does not fight anything Mozilla et al., follow the rules. MS
    does not.

    > I'm trying to set up a simple layout of
    > putting a few divs/spans next to each other and have been working on it
    > for hours (about to be days) and have not found a crossbrowser
    > solution.


    Maybe your are approaching it the wrong way. Some folks try to micro
    place every bit right form the start. My advice is like writing a in
    general, just write an put is proper structure, paragraphs, headings,
    divisions, your content. Then after style it. You would no worry about
    cover art, fonts, paper choices and all *before* you started to write
    the "Great American Novel". You would first focus on your manuscript right?

    Anyway it can be done. My site is very anesthetic--styling is very
    important to the nature of my site. It is more stylistically controlled
    then many sites need to be and does not use tables for layout and I have
    IE cooperating with only one tiny bit accommodation, JavaScript to
    assist for IE lack of support for :hover pseudo-class on LI elements.
    (There is a .htc file hack I am working on that can rid the JavaScript
    reliance)

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
     
    Jonathan N. Little, Apr 14, 2006
    #14
  15. Paul B

    Andy Dingley Guest

    On Thu, 13 Apr 2006 22:07:11 +0100, Paul B <>
    wrote:

    >I understand that using tables is not the 'correct' way to create a
    >webpage layout, so I wondered what the general consensus is on using
    >div tags to 'simulate' a table:
    >http://seventynine.net/testing/test01.html


    The way you've done it ? Terrible.

    You've used the CSS table behaviours applied directly to <div>s. This
    not only acts like a table, it _is_ a table. There's no case where this
    would be relevant to use CSS-wise where a HTML <table> wouldn't be just
    as appropriate. Equally if it's not justofed to use a<table>, then this
    approach is no better.

    The CSS table behaviours were intended for styling HTML tables, or for
    rendering XML directly with CSS. They certainly weren't intended for use
    on other HTML elements.
     
    Andy Dingley, Apr 14, 2006
    #15
  16. Paul B

    Guest

    rtconner wrote:
    > sorry then. I don't post much and am not fully acquanted with proper
    > practice and proceedure.

    Since you seem to be using Google Groups, you might not be aware that
    if you click on "Reply" at the foot of a post, then it won't quote any
    of that post's text in your reply, but if you click on "show options",
    the "Reply" option that then appears has the quoted text in the area
    that you'd be typing in. If that made sense!

    --
    AGw.
     
    , Apr 14, 2006
    #16
  17. Paul B

    Guest

    rtconner wrote:
    > Thats great and all. But not how do you do this practically? IE and
    > Mozilla fight over so many CSS options that displaying anything the
    > same in both of them is a pain. I'm trying to set up a simple layout of
    > putting a few divs/spans next to each other and have been working on it
    > for hours (about to be days) and have not found a crossbrowser
    > solution.

    Perhaps you already do this, but my approach is to test using Firefox
    whilst coding, and then when I'm basically happy with what I've got,
    see what IE does with it. Nine-and-a-bit times out of ten a problem is
    due to IE's screwy interpretation of things, with Firefox just obeying
    the rules*. Anecdotal evidence points to quite a few others around
    here taking a similar approach.


    * Sometimes the rules it obeys I don't entirely agree with, but that's
    a different issue!

    --
    AGw.
     
    , Apr 14, 2006
    #17
  18. Paul B

    Guest

    Jonathan N. Little wrote:
    > My site is very anesthetic


    That's probably not what you meant to say?!


    --
    AGw.
     
    , Apr 14, 2006
    #18
  19. Paul B

    trippy Guest

    In article <>, Paul B took the
    hamburger, threw it on the grill, and I said "Oh wow"...

    > I understand that using tables is not the 'correct' way to create a
    > webpage layout, so I wondered what the general consensus is on using
    > div tags to 'simulate' a table:
    > http://seventynine.net/testing/test01.html
    >
    > It is a very very basic example but I'm sure anyone who has made a
    > layout with a table can see the point behind it.
    >


    You can use a table with tabular data.

    --
    trippy
    mhm31x9 Smeeter#29 WSD#30
    sTaRShInE_mOOnBeAm aT HoTmAil dOt CoM

    NP: "Rhythm From A Red Car" -- Hardline

    "Now, technology's getting better all the time and that's fine,
    but most of the time all you need is a stick of gum, a pocketknife,
    and a smile."

    -- Robert Redford "Spy Game"
     
    trippy, Apr 14, 2006
    #19
  20. Paul B

    Toby Inkster Guest

    Jonathan N. Little wrote:

    > My site is very anesthetic


    It puts you to sleep?

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
     
    Toby Inkster, Apr 14, 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. rich
    Replies:
    0
    Views:
    734
  2. Replies:
    2
    Views:
    372
  3. David
    Replies:
    3
    Views:
    563
    David
    Jul 17, 2009
  4. Notsoswuyd

    Divs & Table Problem

    Notsoswuyd, Aug 26, 2009, in forum: HTML and CSS
    Replies:
    0
    Views:
    468
    Notsoswuyd
    Aug 26, 2009
  5. maya
    Replies:
    4
    Views:
    250
Loading...

Share This Page