31.01.2009, 20:15 Uhr

Alternatives Tabellenmodell

Wenn Sie Tabellen zwar mit CSS erstellen, aufgrund der Browser-Kompatibilität aber nicht auf das HTML-Tabellenmodell setzen möchten, können Sie Tabellen auch mit CSS simulieren. Der Grundaufbau besteht dabei aus -Elementen:
Wenn Sie Tabellen zwar mit CSS erstellen, aufgrund der Browser-Kompatibilität aber nicht auf das HTML-Tabellenmodell setzen möchten, können Sie Tabellen auch mit CSS simulieren. Der Grundaufbau besteht dabei aus <div>-Elementen:
<div class="tabelle">
<div class="zeile">
<div class="zelle_links">Zelle 1</div>
<div class="zelle_rechts">Zelle 2</div>
<div class="trennlinie" />
</div>
<div class="zeile">
<div class="zelle_links">Zelle 3</div>
<div class="zelle_rechts">Zelle 4</div>
<div class="trennlinie" />
</div>
</div>
Die Anordnung der Zellen erfolgt dann mit float. Eine der Zellen fließt links, die andere rechts. So landen beide nebeneinander. Wichtig sind nun noch die richtigen Angaben für Breite und Höhe. Die mit margin angegebenen Außenabstände müssen von der Breite der Zelle abgezogen werden:
.zelle_links {border: none;
background: green;
float: left;
margin: 2%;
padding: 0px;
width: 46%}
.zelle_rechts {background: red;
border: none;
float: right;
margin: 2%;
padding: 0px;
width: 46%}
Zu guter Letzt benötigen Sie in jeder Tabellenzeile ein Element, das als Trennlinie fungiert und den mit float angegebenen Fluss wieder auflöst. Hierzu dient der CSS-Befehl clear. Der Wert both bedeutet, dass der Fluss in beide Richtungen, also nach links und rechts, aufgelöst wird:
.trennlinie {clear: both}
Diese Variante funktioniert in allen modernen Browsern, ist aber in Sachen Handhabung komplexer als ein normales HTML-Tabellenlayout.




Das könnte Sie auch interessieren