Tabelle mit DIV- bzw. Block-Elementen umsetzen

von Oliver Richter (Kommentare: 1)

Neulich wurde ich gefragt, wie man denn mit DIV-Containern das Verhalten und Aussehen einer Tabellenzeile mit zwei Spalten (inklusive Rahmen) am besten herstellen könnte. Denn legt man zwei DIV-Container nebeneinander (zum Beispiel mit Hilfe von float) so sind diese nur dann gleich hoch, wenn auch deren Inhalte jeweils gleich hoch sind oder aber die beiden Boxen eine feste Höhenangabe erhalten. Da Javascript hier ausgeschlossen bleiben sollte, habe ich folgende Überlegungen angestellt:

Variante 1: DIV-Container mit Hintergrundbild

Die beiden DIV-Elemente liegen in einem sie umschließenden weiteren DIV-Container, der ein Hintergrundbild enthält. Ein dritter DIV-Container mit der Anweisung clear: both; direkt unterhalb der beiden gefloateten DIV-Elemente sorgt für die Wiederherstellung des Layouts und dafür, dass alle 3 DIV-Container ordentlich im DIV-Container angezeigt werden. Die Breiten für die beiden Spalten-Container sind fest definiert, sowie auch die Breite für den Gesamtcontainer. In der Mitte bleibt ein Pixel übrig, in der dann auch das Hintergrundbild erscheint, um den Strich in der Mitte anzuzeigen.

CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
<div style="width: 401px; border: 1px solid black; background: url(/files/gf/img/news/div-as-table-line.png) top left repeat-y;">
 <div style="float: left; width: 190px; background: #eeeeee; padding: 5px;">CONTENT</div>
 <div style="float: right; width: 190px; background: #dddddd; padding: 5px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
 <div style="clear: both;"></div>
</div>

Variante 2: ... nur wenn man weiß, welcher der höhere ist...

Naja, so eine richtige Lösung ist es eigentlich nicht. Denn hierbei muss man wissen, welcher von beiden DIV-Containern der höhere ist. Nur dann lässt sich diese reine "Float-Lösung" verwenden.

CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
<div style="width: 402px; border: 1px solid black;">
 <div style="float: left; width: 190px; background: #eeeeee; padding: 5px;">CONTENT</div>
 <div style="float: right; width: 190px; background: #dddddd; padding: 5px; border-left: 1px solid black;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
 <div style="clear: both;"></div>  
</div>

Variante 3: "Float" und "Positionierung"

Hier setze ich nun schon gleich insgesamt fünf DIV-Elemente ein. Drei davon dienen nur Design-Zwecken, daher ist diese Beispiel zwar praktikabel aber semantisch durchaus fragwürdig. Wie auch immer, es ist, grafisch betrachtet, eine reine CSS-Lösung.

CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
<div style="width: 401px; border: 1px solid black; position: relative;">
 <div style="float: left; width: 190px; background: #eeeeee; padding: 5px;">CONTENT</div>
 <div style="float: right; width: 190px; background: #dddddd; padding: 5px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
 <div style=" background: #000000; height: 100%; width: 1px; position: absolute; left: 200px;"></div>
 <div style="clear: both;"></div>
</div>

Variante 4: Die "moderne" Variante...

Es ist eine reine CSS-Lösung und die wohl beste, sofern eine Abwärtskompatiblität nicht nötig ist. Die DIV-Container werden als Tabellen-Elemente definiert mit der CSS-Eigenschaft display.

Der Inhalt der Spalten kann hier, wie auch in "richtigen Tabellenspalten", mit vertical-align ausgerichtet werden, was sehr praktisch ist. Sie verhalten sich also wie Tabellenspalten. Weiterer Vorteil, beide Spalten haben hier auch stets die gleiche Höhe.

CONTENT
CONTENT
CONTENT
CONTENT
CONTENT
<div style="display: table; border: 1px solid black;">
  <div style="display: table-row">
   <div style="display: table-cell; width: 190px; background: #eeeeee; padding: 5px; border-right: 1px solid black;">CONTENT</div>
   <div style="display: table-cell; width: 190px; background: #dddddd; padding: 5px;">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
 </div>
</div>

Zurück

Einen Kommentar schreiben

Kommentar von Natasha |

Hey,
ich hab da mal ne Frage bezüglich einer Spalten übergreifenden Cell. Wie bewerkstellige ich das?

Liebe Grüße
Nata

Antwort von Oliver Richter

Ich weiß nicht genau, was du meinst: 

Bei einer zweispaltigen Tabelle lässt sich eine Spalte, die über beide Spalten gehen soll, mit folgenden Code bewerkstelligen: 

<td colspan="2">INHALT</td>

Also aus:

<tr><td>INHALT</td><td>INHALT</td></tr>

wird:

<tr><td colspan="2">INHALT</td><td>INHALT</td></tr>

Beste Grüße, Oliver

Bachten Sie: Für die Zuordnung Ihrer Nachricht werden die hier anzugebenden Daten Name, E-Mailadresse, Ihr Kommentar gespeichert. Sofern Sie den Wunsch der E-Mail-Benachrichtigung angegeben haben, wird aufgrund technischer Notwendigkeit auch dieser Wert gespeichert. Durch Absenden des Formulars erklären Sie sich damit einverstanden. Alternativ kontaktieren Sie mich bitte über meine E-Mailadresse oder Telefon.
Detaillierte und weitere Hinweise, insb. zum Widerrufsrecht finden Sie in der Datenschutzerklärung.

Sie befinden Sich in der Detailansicht eines Blog-Eintrags.

Um alle Blog-Einträge zu sehen, wechseln Sie bitte zur Nachrichten-Übersicht

Wie kann ich Ihnen helfen?

Sie erreichen mich über mein Kontaktformular