Oftmals werden Navigationsmenüs als Liste – mit den UL- und LI-Elementen – angelegt. Wenn die Menüpunkte nebeneinander statt untereinander dargestellt werden sollen, bedient man sich in der Regel der CSS-Eigenschaften „display“ und „float“, um das gewünschte Aussehen zu erhalten:

li {
  display: block;
  float: left;
}

In den meisten Fällen ist man mit dieser Möglichkeit gut bedient. Wenn ein Menü jedoch eine feste Breite einnehmen soll und sich die einzelnen Menüpunkte dieser Breite jeweils anpassen sollen, hat man ein Problem. Hier kann eine Tabelle helfen. Denn bei einer Tabelle lässt sich eine Gesamtbreite bestimmen, einzelne Tabellenspalten passen sich dieser Gesamtbreite an.

Da es sich aus semantischen Gründen verbietet, für eine Navigation das TABLE-Element zu verwenden, bleiben wir bei der Liste und weisen ihnen mittels CSS Tabelleneigenschaften zu:

ul {
  display: table;
  width: 500px;
}

li {
  display: table-cell;
  table-layout: fixed;
  border-spacing: 5px;
}

Das UL-Element verhält sich fortan wie ein TABLE-Element und das LI-Element wie ein TD-Element. Auch weitere CSS-Eigenschaften für Tabellen wirken sich auf die Listenelemente aus. So sorgt die Eigenschaft „table-layout: fixed“ dafür, dass alle LI-Elemente dieselbe Breite haben. Die Breite selbst wird jedoch durch die Gesamtbreite der Liste – hier 500 Pixel – definiert.

Das Bild zeigt zwei Menüs, die jeweils als Liste mit einer festen Breite von 500 Pixel angelegt wurden. Die einzelnen Menüpunkte passen sich dieser Breite an, ohne dass eine Breite für die einzelnen Menüelemente festgelegt werden muss.

In den Zeiten vor CSS war es üblich, Seiten mit dem TABLE-Element zu gestalten: eine Zeile für den Kopf, eine für den Inhalt und bei Bedarf noch eine für die Fußzeile. Dabei war es oft üblich, die Fußzeile so zu gestalten, dass sie immer am unteren Ende der Seite dargestellt wurde – unabhängig davon, ob die Seite zu scrollen war oder nicht.

Gerade das Darstellen einer Fußzeile, wie es mit Tabellen möglich ist, war bei CSS-Layouts mit DIV-Elementen ein großes Problem. Mit der CSS-Eigenschaft „bottom“ lässt sich zwar ein Element am unteren Rand einer Seite darstellen; das funktioniert allerdings nur, solange die Seite nicht gescrollt werden muss. Denn die CSS-Eigenschaft „bottom“ bezieht sich nicht auf die Gesamthöhe der Seite, sondern nur auf die Höhe des sichtbaren Bereichs.

Verhalten sich die DIV-Elemente wie eine Tabelle, lässt sich auch eine Fußzeile, wie man sie von Tabellenlayouts kennt, realisieren:

html, body {
  height: 100%;
  margin: 0;
}

div.seite {
  display: table;
  width: 100%;
  height: 100%;
}

div.seite > div {
  display: table-row;
}

div.kopf {
  display: table-cell;
  height: 100px;
}

div.inhalt {
  display: table-cell;
}

div.fuss {
  display: table-cell;
  height: 50px;
}

Wichtig ist, dass man dem HTML- und BODY-Element eine Höhe von 100 Prozent zuweist, da ansonsten die Tabelle nicht 100 Prozent der Seitenhöhe füllt. Der HTML-Teil sieht so aus:

<div class="seite">
  <div>
    <div class="kopf">Kopf</div>
  </div>
  <div>
    <div class="inhalt">Inhalt</div>
  </div>
  <div>
    <div class="fuss">Fuß</div>
  </div>
</div>

In dem Beispiel werden Kopf und Fuß mit je einer festen Höhe dargestellt. Dazwischen wird der Inhalt dargestellt. Die Fußzeile wird immer am unteren Seitenrand paltziert und zwar immer unterhalb des Inhaltebereichs.

Wer also Tabellenlayouts wie in alten Zeiten realisieren möchte – allerdings semantisch korrekt –, kann das mit CSS und den vorgestellten Möglichkeiten tun.

Nutzt ihr die Möglichkeit, mit CSS Tabelleneigenschaften auf TABLE- oder UL-Elemente zu übertragen? Wie setzt ihr „display: table“ noch ein?