Zur Verteidigung von Tabellen und Floats in der modernen Entwicklung

Vor über zwanzig Jahren waren Tabellen die Hauptmethode, um Webseiten in HTML zu erstellen. Sie gaben Webentwicklern eine konsistente Kontrolle über die Erstellung von Seiten mit einem gewissen "Design". Webseiten mussten nicht mehr nur von oben nach unten in linearer Weise aufgebaut sein – sie konnten mit Spalten eingerichtet werden, die sich von links nach rechts *und* von oben nach unten ausrichteten. Damals galt dies als ein riesiger Durchbruch.

Tabellen waren jedoch nie für das Layouten von Seiten konzipiert und haben tatsächlich allerlei Probleme, wenn sie heute auf diese Weise verwendet werden. Es war ein praktischer Hack, aber zu der Zeit ein sehr willkommener, besonders für diejenigen, die ein sehr spezifisches Layout erreichen wollten, das mit früheren Methoden nicht möglich war.

Schnellvorlauf in die heutige Zeit und es ist offensichtlich, dass es mit dem Tabellen-Layout-Ansatz viele Probleme gab. Barrierefreiheit ist ein großes Thema. Die Elemente <table>, <th>, <tr> und <td> sind nicht gerade barrierefrei, besonders wenn sie mehrere Ebenen tief verschachtelt sind. Screenreader – die Geräte, die Webinhalte vorlesen und als Maß für die Barrierefreiheitskonformität dienen – haben Schwierigkeiten, sie in zusammenhängende Inhaltsblöcke zu zerlegen. Das soll nicht heißen, dass Tabellen schlecht sind; sie waren einfach nie als Layout-Mechanismus gedacht.

Schauen Sie sich dieses Tabellen-Layout an. Fühlen Sie sich frei, es mit VoiceOver oder einer anderen Screenreader-Software, auf die Sie Zugriff haben, zu testen.

Ja, dieses Beispiel sieht sehr nach einem typischen Webseiten-Layout aus, ist aber ausschließlich mit einer Tabelle erstellt. Sie können sehen, wie schnell es aufgebläht und unzugänglich wird, sobald wir es für etwas anderes als tabellarische Daten verwenden.

Nachdem wir Tabellen über 20 Jahre lang auf die Folter gespannt haben, könnte man meinen, wir sollten sie ganz vermeiden. Wenn Sie noch nie ein tabellenbasiertes Layout veröffentlicht haben, haben Sie zweifellos Schauergeschichten von denen von uns gehört, die es getan haben, und diese Geschichten sind nie freundlich. Es ist, als hätten wir Tabellen irgendwie zum "Internet Explorer der HTML-Elemente" gemacht.

Aber das ist nicht ganz fair, denn Tabellen erfüllen tatsächlich einen Zweck im Web und sie sind tatsächlich barrierefrei, wenn sie richtig eingesetzt werden.

Tabellen sind dafür konzipiert, semantisch zusammengehörige Daten zu verarbeiten, die am besten in einem linearen Format dargestellt werden. Also ja, wir können Tabellen auch heute noch im Jahr 2020 verwenden, und das wird wahrscheinlich auch noch viele Jahre so bleiben.

Hier wird eine Tabelle verwendet, um genau das anzuzeigen, wofür sie bestimmt ist: tabellarische Daten!

Mit dem Streben nach Webstandards Anfang der 2000er Jahre wurden Tabellen als Layoutlösung zugunsten anderer Ansätze beiseite geschoben, insbesondere der CSS-float-Eigenschaft. Designer und Entwickler freuten sich gleichermaßen, denn zum ersten Mal hatten wir eine echte Trennung von Belangen, die es dem Markup erlaubte, die Markup-Dinge zu tun, die es tun muss, und CSS die visuellen Dinge zu tun, die es tun muss. Das machte den Code sowohl sauberer als auch viel einfacher zu warten, und infolgedessen konnten wir uns tatsächlich auf echte Standards wie Barrierefreiheit und sogar andere Praktiken wie SEO konzentrieren.

Sehen (oder besser gesagt *hören*) Sie den Unterschied in diesem Beispiel?

Viele von uns haben in der Vergangenheit mit Floats gearbeitet. Sie wurden ursprünglich entwickelt, um den Fluss von Inhalt um Bilder zu ermöglichen, die links oder rechts gefloatet sind und sich immer noch im Dokumentfluss befinden. Jetzt, da wir neuere Layout-Funktionen haben – wieder, wie Grid und Flexbox – sind auch Floats irgendwie in den Hintergrund getreten, vielleicht entweder, weil es bessere Möglichkeiten gibt, das zu erreichen, was sie tun, oder weil sie nach langer (missbräuchlicher) Verwendung denselben schlechten Ruf wie Tabellen erhalten haben.

Aber Floats sind immer noch nützlich und relevant! Tatsächlich *müssen* wir sie verwenden, damit die shape-outside-Eigenschaft funktioniert.

Ein legitimer float-Anwendungsfall könnte darin bestehen, Inhalt um eine gestylte <blockquote> herumfließen zu lassen.

CSS-Funktionen wie Grid, Flexbox und Mehrspaltenlayouts gehören zu den wunderbaren Werkzeugen, mit denen wir heutzutage arbeiten. Mit noch mehr Layoutmöglichkeiten, saubererem und barrierefreierem Code werden sie auch in den kommenden Jahren unsere bevorzugten Layout-Ansätze bleiben.

Keine Hacks oder zusätzlicher Code in diesem Flexbox-Beispiel desselben Layouts, das wir im gesamten Artikel betrachtet haben

---

Wenn Sie also das nächste Mal erwägen, Tabellen oder Floats zu verwenden, greifen Sie mit Zuversicht zu! Nun, wenn die Situation mit ihrem beabsichtigten Verwendungszweck übereinstimmt. Es ist nicht so, dass ich erwarte, dass Sie mit neu entfachter Begeisterung für Tabellen und Floats hier weggehen; nur, dass sie bei richtiger Anwendung durchaus gültige Techniken sind und sogar unverzichtbare Teile unseres gesamten Werkzeugkastens bleiben.