Tabellen-Layout

Was wir prüfen

Wir untersuchen jede Tabelle auf der Startseite. Als Layout-Tabelle werten wir sie, wenn

• Tabellen ineinander verschachtelt sind,
• sie als reine Darstellung markiert ist (role="presentation"), oder
• sie keine Spaltenüberschriften, Beschriftung oder Tabellenkopf hat, aber ganze Seitenteile enthält, etwa Überschriften, Navigation, Formulare oder eingebettete Inhalte.

Finden wir solche Tabellen, gibt es eine Warnung.

Warum das wichtig ist

In den frühen 2000er-Jahren baute man Websites mit Tabellen: eine Zeile für den Kopf, eine Spalte für das Menü, eine für den Inhalt. Damals gab es keine bessere Möglichkeit. Heute verursacht diese Bauweise mehrere Probleme:

• Auf dem Smartphone: Tabellen behalten ihre Spalten nebeneinander. Statt dass sich das Layout dem schmalen Bildschirm anpasst, wird alles winzig oder muss seitlich gescrollt werden.
• Für Vorlesesoftware: Blinde Menschen hören «Tabelle mit 3 Spalten und 12 Zeilen» und dann jede Zelle einzeln. Der Zusammenhang geht verloren.
• Für Google und KI-Assistenten: Die Struktur der Seite ist schwer zu erkennen. Was ist Navigation, was Hauptinhalt?
• Für die Pflege: Änderungen am Layout sind mühsam, und moderne Gestaltung ist kaum möglich.

Manchmal stammen Layout-Tabellen auch aus E-Mail-Vorlagen, die auf die Website kopiert wurden, oder aus alten Editoren, die Spalten so umgesetzt haben.

So behebst Du es

Layout mit CSS

Moderne Layouts verwenden CSS Flexbox oder Grid. Sie passen sich automatisch an: Auf dem Desktop stehen Spalten nebeneinander, auf dem Smartphone untereinander.

.spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; }

Tabellen für Daten

Behalte Tabellen für echte Daten und gib ihnen Spaltenüberschriften:

<table>
  <caption>Öffnungszeiten</caption>
  <tr><th>Tag</th><th>Zeit</th></tr>
  <tr><td>Montag–Freitag</td><td>8–18 Uhr</td></tr>
</table>

Alte Website

Ist die ganze Website mit Tabellen gebaut, ist ein Umbau meist aufwendiger als ein Neuaufbau. Ein Website-Baukasten wie Wix, Jimdo oder Squarespace oder ein CMS wie WordPress mit aktuellem Theme liefert ein responsives Layout von Haus aus.

Einzelne Tabellen im Inhalt

Wurde im Editor eine Tabelle verwendet, um Bild und Text nebeneinander zu stellen, ersetze sie durch einen Spalten-Block. WordPress hat dafür den Block «Spalten» oder «Medien und Text».

So prüfst Du es selbst

Klick mit der rechten Maustaste auf einen Bereich der Seite und wähle «Untersuchen». Steht in der Elementhierarchie darüber <table>, <tr> und <td>, obwohl dort keine Daten stehen, ist es eine Layout-Tabelle.

Häufige Fragen

Darf eine Website überhaupt Tabellen verwenden?

Ja, für Daten: Preislisten, Öffnungszeiten, technische Angaben, Vergleiche. Mit Spaltenüberschriften (th) sind sie für alle verständlich. Nur als Gerüst für das Seitenlayout sind Tabellen ungeeignet.

Die Website ist schon alt, sieht aber gut aus. Lohnt sich der Umbau?

Ein Tabellen-Layout ist ein deutliches Zeichen, dass die Technik aus den 2000er-Jahren stammt. Meist sind dann auch andere Dinge veraltet. Statt einer Reparatur lohnt sich oft ein Neuaufbau mit einem modernen Baukasten oder CMS.