Tables with DIV
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
Re: Tables with DIV
On 2008-01-26, Knut Krueger <knut.krueger [at] usa.com> 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.
Re: Tables with DIV
On 2008-01-26, Ben C <spamspam [at] spam.eggs> wrote:
> On 2008-01-26, Knut Krueger <knut.krueger [at] usa.com> 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.
Re: Tables with DIV
Gazing into my crystal ball I observed Knut Krueger
<knut.krueger [at] usa.com> writing in news:fnf78v$q8t$01$1 [at] news.t-
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
Re: Tables with DIV
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/
Re: Tables with DIV
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
Re: Tables with DIV
In article <fnftcm$t2j$02$1 [at] news.t-online.com>,
Knut Krueger <knut.krueger [at] usa.com> 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
Re: Tables with DIV
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 ;-)
Regards Knut
Re: Tables with DIV
In article <fng4qi$f91$03$1 [at] news.t-online.com>,
Knut Krueger <knut.krueger [at] usa.com> 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
Re: Tables with DIV
On 26 Jan, 11:58, Knut Krueger <knut.krue... [at] usa.com> 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).
Re: Tables with DIV
On 2008-01-26, Andy Dingley <dingbat [at] codesmiths.com> wrote:
> On 26 Jan, 11:58, Knut Krueger <knut.krue... [at] usa.com> 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.
Re: Tables with DIV
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
Re: Tables with DIV
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
Re: Tables with DIV
In article <fngf4o$382$03$1 [at] news.t-online.com>,
Knut Krueger <knut.krueger [at] usa.com> 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
Re: Tables with DIV
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
Re: Tables with DIV
Post removed (X-No-Archive: yes)
Re: Tables with DIV
On 27 Jan, 19:43, richard <I.dont.c... [at] do.you> 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.
Miscellaneous » alt.html » Tables with DIV