Zweispaltiges Layout

Mit Hilfe einer Tabelle lässt sich einfach ein zweispaltiges Layout gestalten. In eine Spalte findet der Hauptinhalt (Main-Content) platz, in der anderen Spalte können Zusatzinfos oder Links platziert werden. Der Vorteil von einem zweispaltigen Layouts mittels einer Tabelle liegt darin, dass die Tabelle auch beim Zoomen ihre Form behält.

Definieren der Tabelle

Zunächst definiert man mit <table> eine Tabelle.

Die Tabelle umschließt den gesamten Inhalt, der im Hauptbereich des HTML-Dokuments dargestellt wird.

Innerhalb der Tabelle definiert man mit <td> zwei Spalten. In die erste Spalte kommt der Bereich mit dem Hauptinhalt. In die andere Spalte kommt der Bereich mit Zusatzinformationen und Links. So erreicht man auch eine semantische Struktur des Dokuments.

Unterschiedliche Bildschirm-Formate können mit Media-Queries berücksichtigt werden. So ist eine optimal angepasste Formatierung der Ausgabe mit relativ einfachen Mitteln möglich.

Formatieren der Tabellenspalten mit CSS

Mit Hilfe von vertical-align: top; wird der Tabelleninhalt oben ausgerichtet.

Moderner und flexibler ist jedoch der Einsatz von eines Grid-Layouts. Hier lassen sich mehrere Spalten und Zeilen ähnlich wie in einer Tabelle definieren. Die Inhaltsbereiche können dann den Zeilen bzw. Spalten des Grids flexibel zugeordnet werden.