Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Tables with DIV

Reply
Thread Tools

Tables with DIV

 
 
Knut Krueger
Guest
Posts: n/a
 
      01-26-2008
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
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      01-26-2008
On 2008-01-26, Knut Krueger <(E-Mail Removed)> 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.
 
Reply With Quote
 
 
 
 
Ben C
Guest
Posts: n/a
 
      01-26-2008
On 2008-01-26, Ben C <(E-Mail Removed)> wrote:
> On 2008-01-26, Knut Krueger <(E-Mail Removed)> 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.
 
Reply With Quote
 
Adrienne Boswell
Guest
Posts: n/a
 
      01-26-2008
Gazing into my crystal ball I observed Knut Krueger
<(E-Mail Removed)> writing in news:fnf78v$q8t$01$(E-Mail Removed)-
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

 
Reply With Quote
 
Kevin Scholl
Guest
Posts: n/a
 
      01-26-2008
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/
 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      01-26-2008
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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-26-2008
In article <fnftcm$t2j$02$(E-Mail Removed)-online.com>,
Knut Krueger <(E-Mail Removed)> 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
 
Reply With Quote
 
Knut Krueger
Guest
Posts: n/a
 
      01-26-2008
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
 
Reply With Quote
 
dorayme
Guest
Posts: n/a
 
      01-26-2008
In article <fng4qi$f91$03$(E-Mail Removed)-online.com>,
Knut Krueger <(E-Mail Removed)> 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
 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      01-26-2008
On 26 Jan, 11:58, Knut Krueger <(E-Mail Removed)> 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).
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
<div ... /> and <div ...></div> K Viltersten ASP .Net 4 03-31-2009 07:33 PM
NS/FF don't change div offsetWidth when div innerHTML is added toand div becomes wider mscir Javascript 3 06-26-2005 04:04 PM
Q: Div A inside Div B is larger than Div B Dwayne Madsen Javascript 1 06-01-2005 03:02 PM
Tables within tables Otuatail HTML 7 08-02-2004 04:42 AM
Text after 2 tables actually appears between 2 tables ! Peter Bassett HTML 3 08-15-2003 06:46 PM



Advertisments