display:table-cell - Wie funktioniert das?

[ohrflieger]

Hallo,
Ich hab nirgends eine beschreibung gefunden (css4you, selfhtml...), wie der befehl display:table-cell funktioniert und was er bewirkt.
Kann jemand helfen?

 

[Maxi]

table-cell = Das Element steht für eine Tabellenzelle. Wirkt wie die Elemente th und td in HTML.

Du kannst Tabellen mit Hilfe von Divs machen mit display: table-cell; und table-row;

siehe hier bei selfhtml: SELFHTML: Stylesheets / CSS-Eigenschaften / Positionierung und Anzeige von Elementen

 

[BcF]

CSS2 - The display declaration

table <=> <table>
table-row <=> <tr>
table-cell <=> <td>

EDIT:
zu langsam

 

[ohrflieger]

ah. Heißt das, dass

<table>
<tr>
<td>hier</td>
<td>steht</td>
<td>was</td>
</tr>
</table>

dasselbe ist wie

<div style="display:table-cell;">hier</div>
<div style="display:table-cell;">steht</div>
<div style="display:table-cell;">was</div>

?

 

[BcF]

nein, das is dasselbe wie das hier:

<div style="display:table;">
  <div style="display:table-row;">
    <div style="display:table-cell;">Hier</div>
    <div style="display:table-cell;">steht</div>
    <div style="display:table-cell;">was!</div>
  </div>
</div>

 

[Maxi]

Es ist praktisch ganz genau so aufgebaut wie eine Tabelle, nur, dass du statt den tabellen-Tags diese speziellen Div-Tags verwendest.

Schöner ist es dann noch, wenn du CSS dazu einsetzt, wie es im beispiel bei selfhtml der Fall ist.

Diese Tags statt ner richtigen tabelle zu verwenden ist zwar schöner, aber:

Die Angaben zu den Tabelleneigenschaften werden von Netscape 6.0 interpretiert, vom Internet Explorer jedoch auch in der Version 7 noch nicht.

(selfhtml)

 

[ohrflieger]

nur blöd, dass der Internet explorer das nicht macht.
display: Anzeigeart: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Dann wäre alles halb so schwer.
Muss man beim IE also das machen für dreispaltiges Layout:

<div style="float:left;">
   <div style="float:left;">
   hier
   </div>
   <div>
   steht
   </div>
</div>
<div style="float:right;">
was
</div>
<br>

Dann wäre alles klar. Danke!

 

[Frank]

ein dreispaltiges layout legt man so an

CSS

#left {
float : left;
} 
#right {
float : right;
}
#left,#right {
width : 200px;
}
#center {
margin-left : 220px;
margin-right : 220px;
}
#footer {
clear : both;
}

under der HTML dazu:

<div id="left">links</div>
<div id="right">rechts</div>
<div id="center">mitte</div>
<div id="footer">footer</div>