Tables with DIV

Discussion in 'HTML' started by Knut Krueger, Jan 26, 2008.

  1. Knut Krueger

    Knut Krueger Guest

    Hi to all,
    There is an short example in the German selfhtml.og pages:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    <html><head><title>display</title>
    <style type="text/css">
    div.table { display:table; border-collapse:collapse; }
    div.tr { display:table-row; }
    div.td { display:table-cell; border:thin solid red; padding:5px; }
    </style>
    </head><body>

    <div class="table">
    <div class="tr">
    <div class="td">ich</div>
    <div class="td">bin</div>
    <div class="td">eine</div>
    <div class="td">Tabelle</div>
    </div>
    </div>

    </body></html>

    It is working fine with Firefox and Opera, but not with IE.
    The are cells are horizontal ordered, in IE they are vertical ordered.

    Does anybody know why?

    Rgegards Knut
    Knut Krueger, Jan 26, 2008
    #1
    1. Advertising

  2. Knut Krueger

    Ben C Guest

    On 2008-01-26, Knut Krueger <> wrote:
    > Hi to all,
    > There is an short example in the German selfhtml.og pages:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    ><html><head><title>display</title>
    ><style type="text/css">
    > div.table { display:table; border-collapse:collapse; }
    > div.tr { display:table-row; }
    > div.td { display:table-cell; border:thin solid red; padding:5px; }
    ></style>
    ></head><body>
    >
    ><div class="table">
    > <div class="tr">
    > <div class="td">ich</div>
    > <div class="td">bin</div>
    > <div class="td">eine</div>
    > <div class="td">Tabelle</div>
    > </div>
    ></div>
    >
    ></body></html>
    >
    > It is working fine with Firefox and Opera, but not with IE.
    > The are cells are horizontal ordered, in IE they are vertical ordered.
    >
    > Does anybody know why?


    You can't just put divs into trs _even if_ they are display: table-cell.

    The HTML validity rules are applied independently of CSS (and CSS
    doesn't have the same kind of validity rules anyway-- an element that's
    display: table-cell can be nested inside one that's display: inline if
    you like).

    I say "the HTML validity rules". That's not what browsers actually
    apply, but if you write invalid HTML, especially when table, tr and td
    elements are concerned, the browser's parser is likely to rearrange
    things in an unpredictable way.
    Ben C, Jan 26, 2008
    #2
    1. Advertising

  3. Knut Krueger

    Ben C Guest

    On 2008-01-26, Ben C <> wrote:
    > On 2008-01-26, Knut Krueger <> wrote:
    >> Hi to all,
    >> There is an short example in the German selfhtml.og pages:
    >>
    >><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    >><html><head><title>display</title>
    >><style type="text/css">
    >> div.table { display:table; border-collapse:collapse; }
    >> div.tr { display:table-row; }
    >> div.td { display:table-cell; border:thin solid red; padding:5px; }
    >></style>
    >></head><body>
    >>
    >><div class="table">
    >> <div class="tr">
    >> <div class="td">ich</div>
    >> <div class="td">bin</div>
    >> <div class="td">eine</div>
    >> <div class="td">Tabelle</div>
    >> </div>
    >></div>
    >>
    >></body></html>
    >>
    >> It is working fine with Firefox and Opera, but not with IE.
    >> The are cells are horizontal ordered, in IE they are vertical ordered.
    >>
    >> Does anybody know why?

    >
    > You can't just put divs into trs _even if_ they are display: table-cell.
    >
    > The HTML validity rules are applied independently of CSS (and CSS
    > doesn't have the same kind of validity rules anyway-- an element that's
    > display: table-cell can be nested inside one that's display: inline if
    > you like).
    >
    > I say "the HTML validity rules". That's not what browsers actually
    > apply, but if you write invalid HTML, especially when table, tr and td
    > elements are concerned, the browser's parser is likely to rearrange
    > things in an unpredictable way.


    Sorry, I misread your example. They're all divs, and there's nothing
    invalid there.

    The reason is just that IE doesn't support display: table-cell. If you
    want tables in IE you have to do HTML tables.
    Ben C, Jan 26, 2008
    #3
  4. Gazing into my crystal ball I observed Knut Krueger
    <> writing in news:fnf78v$q8t$01$-
    online.com:

    > Hi to all,
    > There is an short example in the German selfhtml.og pages:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    ><html><head><title>display</title>
    ><style type="text/css">
    > div.table { display:table; border-collapse:collapse; }
    > div.tr { display:table-row; }
    > div.td { display:table-cell; border:thin solid red; padding:5px; }
    ></style>
    ></head><body>
    >
    ><div class="table">
    > <div class="tr">
    > <div class="td">ich</div>
    > <div class="td">bin</div>
    > <div class="td">eine</div>
    > <div class="td">Tabelle</div>
    > </div>
    ></div>
    >
    ></body></html>
    >

    In addition to what Ben C said, if the content really is tabular data,
    use the right tool for the job - a table. Personally, I can't really
    see any reason to use display:table when there is a perfectly good
    element already available, it just adds more confusion, and the
    potential for "divitis".

    --
    Adrienne Boswell at Home
    Arbpen Web Site Design Services
    http://www.cavalcade-of-coding.info
    Please respond to the group so others can share
    Adrienne Boswell, Jan 26, 2008
    #4
  5. Knut Krueger

    Kevin Scholl Guest

    Knut Krueger wrote:

    > <div class="table">
    > <div class="tr">
    > <div class="td">ich</div>
    > <div class="td">bin</div>
    > <div class="td">eine</div>
    > <div class="td">Tabelle</div>
    > </div>
    > </div>


    In addition to the other responses, this is precisely why you have to
    avoid the mindset of DIV and TABLE (and its elements) being somehow
    analogous. There is not a one-to-one correlation between the two
    structures. When someone says something to the effect of "converting my
    tables site to divs", they must think of their document semantically,
    not in terms of some magic conversion.

    --

    Kevin Scholl
    http://www.ksscholl.com/
    Kevin Scholl, Jan 26, 2008
    #5
  6. Knut Krueger

    Knut Krueger Guest

    Adrienne Boswell schrieb:
    > In addition to what Ben C said, if the content really is tabular data,
    > use the right tool for the job - a table.

    And if you would like to substitute the words with images?
    The common style of very much pages is still using tabular tables.
    Then it misusing tables - what do you suggest for that?
    Or better to get 2,3 or 4 images in a row on widescreen high resolution
    and less in smaller screens?
    Regards Knut
    Knut Krueger, Jan 26, 2008
    #6
  7. Knut Krueger

    dorayme Guest

    In article <fnftcm$t2j$02$-online.com>,
    Knut Krueger <> wrote:

    > Adrienne Boswell schrieb:
    > > In addition to what Ben C said, if the content really is tabular data,
    > > use the right tool for the job - a table.

    > And if you would like to substitute the words with images?
    > The common style of very much pages is still using tabular tables.
    > Then it misusing tables - what do you suggest for that?
    > Or better to get 2,3 or 4 images in a row on widescreen high resolution
    > and less in smaller screens?
    > Regards Knut


    http://netweaver.com.au/alt/kruger.html

    --
    dorayme
    dorayme, Jan 26, 2008
    #7
  8. Knut Krueger

    Knut Krueger Guest

    Knut Krueger, Jan 26, 2008
    #8
  9. Knut Krueger

    dorayme Guest

    In article <fng4qi$f91$03$-online.com>,
    Knut Krueger <> wrote:

    > dorayme schrieb:
    >
    > > http://netweaver.com.au/alt/kruger.html
    > >

    >
    > Thanks a lot, I did not think that is so easy.
    > I was looking for more difficult stuff ;-)
    >


    The above is fine for just pictures but you need to adjust the
    margins and padding to suit yourself. And there are pitfalls if
    you throw in images that are wildly different in size or aspect
    ratio. But you are welcome to post a url to what you want to do
    and you will get advice about how better to arrange things in the
    html and css.

    --
    dorayme
    dorayme, Jan 26, 2008
    #9
  10. Knut Krueger

    Andy Dingley Guest

    On 26 Jan, 11:58, Knut Krueger <> wrote:

    > div.tr { display:table-row; }


    The table-styled behaviours in CSS were intended for two things, and
    only two things: HTML's table elements, and styling XML. They were
    not intended for, and are very sparsely supported for, a general means
    of attaching table-like behaviours to generalised HTML elements.

    You can do this in IE if you serve XHTML, serve it as XML, and supply
    a client-side CSS stylesheet for it. As this relies on the XML not
    being treated as HTML-related at all, you'll have to style the content
    entirely from your own stylesheet (i.e. attach a HTML default
    stylesheet).
    Andy Dingley, Jan 26, 2008
    #10
  11. Knut Krueger

    Ben C Guest

    On 2008-01-26, Andy Dingley <> wrote:
    > On 26 Jan, 11:58, Knut Krueger <> wrote:
    >
    >> div.tr { display:table-row; }

    >
    > The table-styled behaviours in CSS were intended for two things, and
    > only two things: HTML's table elements, and styling XML. They were
    > not intended for, and are very sparsely supported for, a general means
    > of attaching table-like behaviours to generalised HTML elements.


    It's only IE that doesn't support them. They are a useful way to achieve
    certain layout effects that aren't really possible any other way.

    Centered shrink-to-fit block, vertical centering of block with
    auto-height, and equal-height columns spring to mind.
    Ben C, Jan 26, 2008
    #11
  12. Knut Krueger

    Knut Krueger Guest

    dorayme schrieb:
    But you are welcome to post a url to what you want to do
    > and you will get advice about how better to arrange things in the
    > html and css.

    oh... no .... I just did an html check and found errors ....
    I think I have to fix them first

    Knut
    Knut Krueger, Jan 26, 2008
    #12
  13. Knut Krueger

    Knut Krueger Guest

    Knut Krueger, Jan 26, 2008
    #13
  14. Knut Krueger

    dorayme Guest

    In article <fngf4o$382$03$-online.com>,
    Knut Krueger <> wrote:

    > dorayme schrieb:
    > But you are welcome to post a url to what you want to do
    > > and you will get advice about how better to arrange things in the
    > > html and css.

    > http://uni-regensburg.equine-behaviour.de/index.php?incfile=cooperation_e.php
    >
    > but the css validator doesn't work with the style sheet:
    > http://uni-regensburg.equine-behaviour.de/css/layout.css
    >
    > Regards Knut


    Looks complicated. I have not heard about float: both for
    anything?

    Anyway, I see you have captions. You might see simpler code at:

    <http://netweaver.com.au/alt/thumbnailGalleryWithShortCaptions/thu
    mbLandscapeGallery7.html>

    and one way to accommodate varying sized floated div packages to
    make things a bit regular looking is to pick out your biggest
    package (that is the div that contains the pic and the caption
    and link) and make all the floated divs that particular size.

    Or else take a good look at all your image/caption packages and
    see if you can divide them into very few types, large, medium,
    small (at the most) and order these in the html and size them
    accordingly via wrappers of different ids or classes.

    In the above url, you can see what I might mean by seeing the
    different pages that are linked, You could make one page with all
    my three pages together.

    <div id="wrapperLarge">
    <div>...img/caption...</div>
    <div>...img/caption...</div>
    .....
    </div>

    <div id="wrapperMedium">
    <div>...img/caption...</div>
    <div>...img/caption...</div>
    .....
    </div>

    <div id="wrapperSmall">
    <div>...img/caption...</div>
    <div>...img/caption...</div>
    .....
    </div>

    and style

    wrapper#large div {...}
    wrapper#medium div {...}
    wrapper#small div {...}

    to suit.

    --
    dorayme
    dorayme, Jan 27, 2008
    #14
  15. Knut Krueger

    Knut Krueger Guest

    dorayme schrieb:

    >> but the css validator doesn't work with the style sheet:
    >> http://uni-regensburg.equine-behaviour.de/css/layout.css
    >>
    >> Regards Knut

    >
    > Looks complicated. I have not heard about float: both for
    > anything?


    I have not heard either ;-) comes from any former wrong search and
    replace or a tired brain ...

    I will look to the rest tomorrow.

    but do you know what's wrong with the css file that the validator shows

    "Servlet has thrown exception:javax.servlet.ServletException: Timed out"



    Thank you
    Knut Krueger, Jan 27, 2008
    #15
  16. Knut Krueger

    richard Guest

    On Sat, 26 Jan 2008 12:58:08 +0100, Knut Krueger
    <> wrote:

    >Hi to all,
    >There is an short example in the German selfhtml.og pages:
    >
    ><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    ><html><head><title>display</title>
    ><style type="text/css">
    >div.table { display:table; border-collapse:collapse; }
    >div.tr { display:table-row; }
    >div.td { display:table-cell; border:thin solid red; padding:5px; }
    ></style>
    ></head><body>
    >
    ><div class="table">
    > <div class="tr">
    > <div class="td">ich</div>
    > <div class="td">bin</div>
    > <div class="td">eine</div>
    > <div class="td">Tabelle</div>
    > </div>
    ></div>
    >
    ></body></html>
    >
    >It is working fine with Firefox and Opera, but not with IE.
    >The are cells are horizontal ordered, in IE they are vertical ordered.
    >
    >Does anybody know why?
    >
    >Rgegards Knut


    First, think of a division as a table cell.
    You can not mix the two as you are attempting to do.
    It is one or the other, not both.
    Then you are using tag names as class identifiers.

    Perhaps you should try something like this:

    <div class="box1">
    <div class="row">
    <div class="cell">Ich</div>
    <div class="cell">bin</div>
    <div class="cell">nicht</div>
    </div>
    </div>

    In your css, define the characteristics for each division as desired.
    if you want "cell" side by side, float them.
    ..cell {float:left;}
    ..row {clear:left;}
    Then it will look like a table.
    richard, Jan 27, 2008
    #16
  17. Knut Krueger

    Andy Dingley Guest

    On 27 Jan, 19:43, richard <> wrote:

    > .cell {float:left;}
    > .row {clear:left;}
    > Then it will look like a table.


    No, it will look like a bunch of floated <div>, not quite like a
    <table>.

    Consider both these examples, with multiple rows and with varying
    lengths of data in each cell. For a <table>, or the CSS example using
    display:table-cell; then these columns will line up vertically. Using
    floated <div>, each <div> will determine its own, differing width
    according to the content that's in it.

    You _could_ hard-code the width of all the <div> cells to all be the
    same, but then you lose the dynamically self-sizing behaviour that's
    one of the most useful aspects of table-like layout.
    Andy Dingley, Jan 28, 2008
    #17
    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. Peter Bassett
    Replies:
    3
    Views:
    917
    Augustus
    Aug 15, 2003
  2. Otuatail

    Tables within tables

    Otuatail, Jul 31, 2004, in forum: HTML
    Replies:
    7
    Views:
    486
  3. K Viltersten

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

    K Viltersten, Mar 30, 2009, in forum: ASP .Net
    Replies:
    4
    Views:
    728
  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:
    178
    David Dorward
    Jun 1, 2005
  5. mscir
    Replies:
    3
    Views:
    298
    Martin Honnen
    Jun 26, 2005
Loading...

Share This Page