Tables with DIV

K

Knut Krueger

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
 
B

Ben C

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?
Click to expand...

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.
 
B

Ben C

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.
Click to expand...

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.
 
A

Adrienne Boswell

Gazing into my crystal ball I observed Knut Krueger
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>
Click to expand...
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".
 
K

Kevin Scholl

Knut said:
<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>
Click to expand...

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.
 
K

Knut Krueger

Adrienne said:
In addition to what Ben C said, if the content really is tabular data,
use the right tool for the job - a table.
Click to expand...
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
 
D

dorayme

Knut Krueger said:
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
Click to expand...

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

dorayme

Knut Krueger said:
Thanks a lot, I did not think that is so easy.
I was looking for more difficult stuff ;-)
Click to expand...

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.
 
A

Andy Dingley

div.tr { display:table-row; }
Click to expand...

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).
 
B

Ben C

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.
Click to expand...

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.
 
K

Knut Krueger

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.
Click to expand...
oh... no .... I just did an html check and found errors ....
I think I have to fix them first

Knut
 
D

dorayme

Knut Krueger said:
dorayme schrieb:
But you are welcome to post a url to what you want to do
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
Click to expand...

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.
 
K

Knut Krueger

dorayme said:
Looks complicated. I have not heard about float: both for
anything?
Click to expand...

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
 
R

richard

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
Click to expand...

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.
 
A

Andy Dingley

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

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
Help needed with thank you message 5
Having trouble centering contents of td ? 3
Positioning CSS components 1
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Need help , Having problem with Drag n Drop ? 9
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

Total: 30 (members: 2, guests: 28)
Robots: 617

Forum statistics

Threads
473,769
Messages
2,569,578
Members
45,052
Latest member
LucyCarper

Latest Threads

Top