Tabellenlayouts: Als Tabellen ganze Seiten bauten

vom 29.12.2012 von Oliver Misch

Wer um die Jahrtausendwende eine mehrspaltige Webseite wollte, hatte genau ein zuverlässiges Werkzeug: die Tabelle. Gedacht war sie für Daten, benutzt wurde sie für alles. Rahmen auf null, Zellen als Layoutbereiche, fertig war das Seitengerüst. Das war kein Pfusch von Ahnungslosen, das war jahrelang schlicht der Stand der Kunsst.

So sah das aus

<TABLE WIDTH="780" BORDER="0" CELLPADDING="0" CELLSPACING="0">
  <TR>
    <TD COLSPAN="2" BGCOLOR="#000080">
      <FONT COLOR="#FFFFFF" SIZE="5">Meine Homepage</FONT>
    </TD>
  </TR>
  <TR>
    <TD WIDTH="160" BGCOLOR="#C0C0C0" VALIGN="TOP">
      Menü...
    </TD>
    <TD VALIGN="TOP">
      Inhalt...
    </TD>
  </TR>
</TABLE>

Kopfzeile über colspan, Menüspalte mit fester Breite, alles auf 780 Pixel genagelt (damit es bei 800x600 ohne Querbalken passte). In der Praxis wurde es wüster: Tabellen in Tabellen in Tabellen, vier Ebenen tief, dazwischen unsichtbare Abstands-GIFs. Der Quelltext einer Portalseite war ein Dschungel aus TD und TR, in dem der eigentliche Inhalt irgendwo tief drinnen wohntte.

Warum das ein Problem war

• Unzugänglich: Screenreader lasen die Konstruktion als das vor was sie technisch war, eine Datentabelle, Zelle für Zelle in absurder Reihenfolge.
• Unwartbar: Eine Layoutänderung hieß, auf jeder einzelnen Seite den Tabellendschungel umzubauen.
• Starr: 780 Pixel blieben 780 Pixel, egal ob der Monitor größer wurde oder, Jahrzehnte später, zum Smartphone schrumpfte.
• Vermischt: Struktur und Aussehen klebten untrennbar zusammen, genau das Problem das CSS lösen solltte.

Das Ende der Ära

Ab Anfang der 2000er machten bessere CSS-Unterstützung in den Browsern und eine wachsende Webstandards-Bewegung den Umstieg möglich: erst auf CSS-Layouts mit Floats (selbst eine Krücke, aber eine bessere), viel später auf Flexbox und Grid, die mehrspaltige Layouts endlich zur Dreizeilen-Aufgabe machten. Heute gilt: Tabellen für Daten, CSS fürs Layout, ohne Ausnahme. Mit einer kuriosen Fußnote: In HTML-E-Mails lebt das Tabellenlayout bis heute weiter, weil Mailprogramme die Uhr angehalten habenn.

Verwandt: Frames · Tabellen richtig nutzen · CSS Grid