DIV als Tabelle oder doch lieber table?

[Karl das kahle Moorhuhn]

Ich möchte mehrere Div-Container tabellenartig mit 2 Spalten und einer dynamischen Anzahl von Zeilen formatiern, bekomme es aber nicht hin wie gewünscht, hier mal ein Muster skizziert:

---------------------
| Spalte 1 | Spalte 2 |
---------------------
| Spalte 1 | Spalte 2 |
---------------------
| usw...... | usw......|
---------------------

Ansich kein Problem, wenn die einzelnen Zeilene der Tabelle eine bestimmte Höhe haben. Jedoch soll die Höhe flexibel sein, d.h. bestimmte Einträge sind sehr lang, daher mit Zeilenumbruch. Da der Inhalt dynamisch erzeugt werden soll, kann hier nicht mit absoluten, sondern nur mit relativen Positionierungen gearbeitet werden. Die langen Einträge können sowohl in Spalte1 als auch in Spalte2 auftreten.

Leider bekomme ich kein dementsprechendes Layout hin, da bei float-Angaben sich die Browser unterscheiden und absolute Positionierung leider nicht funktioniert. Da es sich jedoch nicht im eigentlichen Sinne um eine Tabelle handelt, möchte ich aus semantischen Gründen auf <table> verzichten.

Jemand eine Idee (oder Link? Habe selbst bei Google nix vernünftiges gefunden) oder sollte ich in dem Fall dann doch table nehmen?

 

[Andreas B]

Hallo,
eine Möglichkeit wäre:
CSS:

.zeile{width:280px;}
.zelle{height:100%;width:140px;float:left;}

HTML:

<div class="zeile">
<div class="zelle">Text text text</div>
<div class="zelle">Text text text</div>
</div>
<div class="zeile">
<div class="zelle">Text text text</div>
<div class="zelle">Text text text</div>
</div>

Mit freundlichen Grüßen

 

[Elroy]

Hallo.

Ob table oder nicht hängt eigentlich von deinen Inhalten ab.

Die einzige andere Möglichkeit die mir momentan einfällt ist mit verschachtelten div Containern zu arbeiten, was natürlich auch keine optimale Lösung ist (Stichwort divsuppe).

Es bringt dir nichts nur der Semantik wegen eine Tabelle mit divs nachbauen zu wollen. Ist das hier wirklich nötig oder gibt es noch andere Layoutmöglichkeiten?

Ich persönlich würde eine Tabelle einer divsuppe vorziehen, vorher aber noch einmal genau überprüfen ob es wirklich keine andere Möglichkeit gibt.

Gruss
Elroy

 

[Karl das kahle Moorhuhn]

Hallo,
eine Möglichkeit wäre:
CSS:

.zeile{width:280px;}
.zelle{height:100%;width:140px;float:left;}

HTML:

<div class="zeile">
<div class="zelle">Text text text</div>
<div class="zelle">Text text text</div>
</div>
<div class="zeile">
<div class="zelle">Text text text</div>
<div class="zelle">Text text text</div>
</div>

Mit freundlichen Grüßen

Dankeschön! Ist zwar nicht ganz die gewüschte Lösung, hat mich aber auf den richtigen Pfad gebracht. Zusätzlich musste ich noch bei der Zeile (position:static) deklarieren und die height-Angabe ist überflüssig (Übernimmt sonst die Höhe von übergeordneten Elementen außerhalb der Tabelle). Hatte außerdem noch vergessen, dass es ein drittes Element pro Zeile gibt und zwar eine untere Linie (<hr/>, ich weiß das es auch mit CSS geht), bei dem noch clear:left notwendig war. habe jetzt eine Lösung, die in mehreren Browsern halbwegs funktioniert