Inhaltsverzeichnis

Kürzlich hatte ich die Gelegenheit, mich erneut mit einem der kniffligeren Aspekte der Webentwicklung auseinanderzusetzen: den responsiven HTML-Tabellen.

Dieses Thema zählt nicht unbedingt zu meinen Favoriten. Der Hauptgrund dafür liegt in der fortwährenden Herausforderung, effektiv responsive Tabellen zu gestalten, die auf verschiedenen Geräten gleichermassen gut funktionieren.

Die Erstellung einer Tabelle, die sich nahtlos an unterschiedliche Bildschirmgrössen anpasst, ist eine Kunst für sich. Dieser Erfahrungsbericht soll nicht nur die Probleme beleuchten, sondern auch praktische Lösungen aufzeigen, die ich während dieses Prozesses entdeckt habe.

HTML Tabelle: Was ist das und warum brauchen wir sie

Die HTML Tabelle ist ein praktisches Werkzeuge, um grössere Datenmengen übersichtlich und kompakt darzustellen. Sie bringt Struktur in die Informationsflut und macht es einfacher, den Überblick zu behalten.

In den frühen Tagen der Webentwicklung, als gestalterische Optionen noch begrenzt waren, nutzten Webentwickler Tabellen nicht nur für die Aufbereitung von Daten, sondern auch, um ganze Websites optisch ansprechender und strukturierter zu gestalten.

Trotz des Fortschritts hinsichtlich Werkzeugen zur Erzeugung von komplexen Layouts wie z.B. CSS Flexbox und CSS Grid, werden Tabellen aber auch heute noch verwendet, um z.B. E-Mail-Layouts zu erstellen.

Der Grund dafür liegt in der technischen Beschränkung vieler E-Mail-Clients, die moderne CSS-Layouts nicht vollständig unterstützen. Hier bieten Tabellen eine zuverlässige Lösung, um ein konsistentes Erscheinungsbild zu gewährleisten.

Kurzum, trotz aller Fortschritte in der Webtechnologie sind HTML-Tabellen immer noch ein unverzichtbares Element in der digitalen Gestaltung.

Die knifflige Kunst, responsive Tabellen zu erstellen

Obwohl sich HTML und CSS ständig weiterentwickeln, hat der gute alte <table>-Tag seit Jahren kaum Neuerungen erfahren. Tabellen wurden ursprünglich entwickelt, um Daten ordentlich und kompakt in horizontalen Spalten anzuordnen.

Doch genau hier liegt der Hase im Pfeffer, besonders wenn es um mobile Geräte geht.

Auf kleineren Bildschirmen, wie denen von Smartphones, funktioniert dieses Prinzip einfach nicht gut. Um alles ins Blickfeld zu bekommen, müssen Daten oft gestapelt werden, damit sie in den Viewport passen.

Das klingt erstmal nicht schlecht, aber dadurch verliert man schnell den Überblick und die Kompaktheit, die Tabellen so nützlich machen. Man landet dann bei Text, der entweder zu klein ist, um ihn bequem zu lesen, oder man scrollt sich einen Wolf, weil alles zu lang wird.

Das Ergebnis? Ein Formatierungsalbtraum, wenn man versucht, die gleiche Nutzerfreundlichkeit und Übersichtlichkeit zu erreichen, die auf einem Desktop möglich ist. Also, wie balanciert man diese Designanforderungen geschickt aus, ohne die Nutzer zu frustrieren?

Das ist die grosse Frage, die das Erstellen responsiver Tabellen so herausfordernd macht.

Wie wäre es stattdessen mit Flexbox oder Grid?

Natürlich gibt es moderne CSS-Technologien wie Flexbox und Grid, die einem viel Flexibilität beim Layouten bieten. Diese Werkzeuge sind grossartig, um komplexe, responsive Layouts zu gestalten, aber wenn es um die Darstellung von Daten in tabellarischer Form geht, haben sie gewisse Einschränkungen, die sie weniger ideal machen als das gute alte <table>.

Semantik: HTML-Tabellen bieten eine klare semantische Struktur, die nicht nur für Menschen, sondern auch für Suchmaschinen und Screenreader (Accessibility) leicht verständlich ist. Diese Struktur hilft dabei, die Beziehungen zwischen Datenpunkten deutlich zu machen. Mit Flexbox oder Grid ist dies schwieriger zu erreichen und es gibt dafür keine einheitlichen Konventionen.
Automatische Dimensionierung: Tabellenzellen passen ihre Grösse automatisch an den Inhalt an, ohne dass viel zusätzlicher CSS-Code nötig ist. Dies stellt sicher, dass alle Inhalte sichtbar und gut lesbar sind.

Kurz gesagt, obwohl Flexbox und Grid in vielen Situationen hervorragende Dienste leisten, bleibt das <table>-Element für die Darstellung von strukturierten Datenmengen oft die beste Wahl, insbesondere wenn die Klarheit der Datenstruktur und die Zugänglichkeit (Accessibility) im Vordergrund stehen.

Steht es wirklich so schlimm um responsive Tabellen?

Keine Sorge, es ist noch nicht aller Tage Abend!

Ich habe einige Möglichkeiten erforscht, wie man trotz allem responsive Tabellen erstellen kann.

Eine Option ist der Einsatz einer JavaScript-Bibliothek. Für diejenigen, die WordPress nutzen, könnte auch ein spezielles Plugin eine gute Lösung sein. Ausserdem lässt sich Responsivität auch mit purem CSS bewerkstelligen.

Im Folgenden werde ich diese Methoden detaillierter vorstellen und sowohl ihre Vor- als auch Nachteile beleuchten.

JavaScript und Plugins

Ich habe mir einige JavaScript-Bibliotheken und Plugins näher angeschaut. Diese Tools bieten mehr als nur ein bisschen Responsivität – sie sind wahre Funktionen-Kraftpakete. Super praktisch, wenn Dinge wie Paginierung, Suchfunktionen, Sortiermöglichkeiten oder Filter benötigt werden.

In meinem eigenen Projekt fand ich allerdings, dass all diese Zusatzfeatures eher kontraproduktiv waren. Ich wollte ja nur eine simple, schnelle und benutzerfreundliche responsive Tabelle ohne viel Schnickschnack.

Für andere Projekte könnten diese zusätzlichen Funktionen jedoch genau das Richtige sein und richtig punkten. Jedes Projekt ist anders, und manchmal ist mehr eben doch mehr!

Vorteile

Umfangreiche Features: Viele zusätzliche Features wie Paginierung, Suchfunktionen, Sortierung und Filter.

Nachteile

Überqualifiziert für die Basics: Diese Tools können manchmal mehr, als man eigentlich braucht. Das führt zu einem spürbaren Overhead, der sich wiederum negativ auf die Performance auswirken kann – wie mit Kanonen auf Spatzen schiessen.
Zeitfresser: Die Implementierung dieser mächtigen Helfer kann ziemlich zeitaufwendig sein. Man muss sich durch eine Menge Einstellungen und Optionen wühlen, bevor alles läuft.
Kompaktheit mit Haken: Zwar erreichen viele dieser Lösungen Responsivität durch clevere Tricks wie Toggling oder Stapelung, aber das hat mich nicht überzeugt. Toggling mag zwar platzsparend sein, indem es einige Zellen einfach versteckt, die man dann bei Bedarf wieder aufklappen muss. Am Ende hat man aber oft wieder nur gestapelte Zellen, die man erst entfalten muss – irgendwie ist das auch nicht das Gelbe vom Ei.

Responsive Tabelle Prinzipien Stapelung und Toggling — Links Stapelung, Rechts Toggling

Untersuchte Werkzeuge

Sollte sich aber doch jemand für die untersuchten Werkzeuge interessieren, hier die Referenzen, in den Worten der Hersteller:

Bibliotheken

DataTables for jQuery: DataTables ist eine Bibliothek zur Verbesserung von Tabellen, die Funktionen wie Blättern, Ordnen, Suchen, Scrollen und vieles mehr bietet.
AG Grid: AG Grid ist ein funktionsreiches Datagrid, das für die wichtigsten JavaScript-Frameworks entwickelt wurde.
Tablesaw: Eine Reihe von Plugins für responsive Tabellen.
FooTable V3: FooTable ist ein jQuery-Plugin, das darauf abzielt, HTML-Tabellen auf kleineren Geräten grossartig aussehen zu lassen - egal, wie viele Datenspalten Sie darin haben.
Grid.js: Eine Tabellenbibliothek, die überall funktioniert. Einfache und schlanke Implementierung.

Plugins

wpDataTables: wpDataTables ist ein beliebtes WordPress-Tabellen-Plugin, mit dem Sie schnell Datentabellen und Tabellendiagramme aus Excel, CSV, XML, JSON, PHP und anderen Datenquellen erstellen können.
Ninja Tables: Es gibt Ihnen die einfachste Möglichkeit, verschiedene Arten von WordPress-Tabellen innerhalb von Minuten zu erstellen, und das sogar ohne eine einzige Zeile Code zu schreiben!
Data Tables Generator: Erstellen Sie ansprechende Datentabellen mit Sortierung, Suche, Paginierung, Filterung und mehr. Einfach zu verwendende Tabellen, Diagramme und Datenverwaltung.
TablePress: Eweitern Sie Ihre Website mit funktionsreichen Tabellen, die Ihre Besucher lieben werden! TablePress ist das beliebteste und am besten bewertete WordPress-Tabellen-Plugin.

CSS Lösung

Bei der CSS-Lösung geht's darum, die Tabelle ab einer bestimmten Viewport-Breite einfach zu stapeln. Was auch dazu gehört: Der Tabellenkopf macht sich unsichtbar, und die Header-Labels, also die <th>-Elemente, werden mithilfe von CSS geschickt vor jede Zelle gesetzt. So bleibt alles schick und übersichtlich, selbst wenn's auf dem Bildschirm etwas enger wird.

Vorteile

Weniger zeitaufwendig: Ganz ohne die Hilfe von JavaScript ist man mit der CSS-Lösung wesentlich flinker unterwegs. Weniger Fummelarbeit bedeutet, schneller am Ziel.
Schlank: Hier gibt es kaum Overhead zu bekämpfen. Das heisst, die Website bleibt schnittig und reaktionsschnell, ohne unnötiges Ballast.

Nachteile

Stapelung: Muss ich mehr sagen?
Eingeschränkte Flexibilität: Diese Methode funktioniert recht einfach, solange man sich auf das Stapeln der Zellen bei einer bestimmten Bildschirmbreite beschränkt. Sobald komplexere Anpassungen erforderlich sind, steigt der Schwierigkeitsgrad wieder an.
Zugänglichkeit braucht Arbeit: Die Zugänglichkeit (Accessibility) geht mit diesem Trick flöten, weil er dazu führt, dass die <td>-Elemente vom Browser nicht mehr als solche erkannt werden, sondern als Block-Level-Elemente. Dem könnte man jedoch auch mit einem JavaScript-Snippet wieder zu Leibe Rücken.

Wenn Sie mehr über diese Lösung erfahren möchten, gibt es hier ein kleines Tutorial vom vermutlich bekanntesten CSS-Guru auf YouTube. Ok, es scheint, als ob die passende Lösung noch nicht dabei ist. Hier ist meine alternative Lösung.

Persönliche Lösung

Die Lösung, für die ich mich entschieden habe, ist herrlich unkompliziert und blitzschnell umgesetzt. Mit ein paar schlichten Zeilen CSS ist sie auch für diejenigen unter uns, die nicht gerade Code-Gurus sind, super zugänglich. Und das Beste? Sie bleibt dabei total benutzerfreundlich und schafft es, die Daten schön kompakt zu präsentieren.

Als nächstes folgt ein Beispiel, womit ich die Lösung Schritt für Schritt darstellen möchte.

Als erstes benötigen wir eine Tabelle mit der wir arbeiten können. Wir machen uns das Leben etwas einfacher und benutzen dafür einen Tabellen Generator.

Mit dem Table Generator zur eigenen Tabelle

Für unsere Zwecke verwenden wir diesen ansprechenden Tabellen-Generator. Als erstes wählen wir die für uns passende Anzahl Spalten (Columns) und Zeilen (Rows), sowie das Layout.

Layout: auto
Anzahl Spalten definieren: 5
Anzahl Zeilen definieren: 10

Für dieses Beispiel haben wir uns für 5 Spalten und 10 Zeilen entschieden. Wir wählen das Layout “auto”.

Das gewählte Layout ist Geschmacksache. Abgekürzt erklärt, bedeutet “fixed”, dass die Spalten eine fixe Breite einnehmen (jede Spalte ist gleich breit), wohingegen bei “auto”, der Browser entscheidet wie breit die unterschiedlichen Spalten sind, abhängig vom Inhalt der Zellen.

Mir gefällt das angepasste Layout besser, deshalb verwende ich “auto”.

Als nächstes wählen wir die Farben für den Tabellen-Kopf (Header) und die Zeilen (Rows).

Header Hintergrund: #eceff1
Header Text: #000000
Rows Hintergrund: #ffffff
Rows Text: #000000

Die Eingaben verleihen dem Kopf einen von den Zellen abweichenden Hintergrund, damit er sich gut vom Rest abhebt. Die Text-Farbe wählen wir einheitlich.

Nun ist der Rahmen (Borders) dran.

Farbe: #dededf
Stil: solid
Breite: 1px
Kollabieren: separate
Abstand: 0

Wir verleihen damit der Tabelle selbst und allen Zellen einen durchgezogenen (solid) Rahmen mit einer Breite (width) von 1px.

Kollabieren “separate” bedeutet, dass die Rahmen der Tabelle und Zellen separiert werden. Wir benötigen dies, um sicherzustellen, dass bei einem fixen Header die Zellen Ihren Rahmen beibehalten (dazu gleich mehr).

Mit dem Abstand von 0 erreichen wir, dass zwischen den Zellen kein Abstand eingebaut wird.

Perfekt, damit ist unsere Tabelle bereit, um in unsere Applikation kopiert zu werden.

Nun fehlt nur noch der Feinschliff durch ein paar CSS-Anpassungen.

CSS Anpassungen

Wir nehmen im kopierten CSS, die folgenden Anpassungen vor:

.table_component: "overflow: auto;"
.table_component: "max-height: 80vh;"
.table_component: "position: relative;"
.table_component table: "padding: 0;"
.table_component table: "min-width: 768px;"
.table_component thead: "position: sticky;"
.table_component thead: "top: 0;"

Der Tabellen-Container (.table_component) erhält “overflow: auto” und “max-height: 80vh;” Damit erreichen wir, dass eine Tabelle die höher ist als 80vh (Viewport height), die vertikale Scrollbar zum erscheinen bringt. Falls die Tabelle sich unschön in die Höhe streckt, löschen Sie “height: 100%” noch.

Wir geben der Tabelle (.table_component table) “padding: 0”, um die Doppellinie um die Tabelle herum zu verhindern. Eine definierte Breite “min-width: 768px;” führt zum Erscheinen der horizontalen Scrollbar, wenn der Kontainer bzw. Viewport in der Breite geringer ist 768px.

Zum Schluss machen wir den Kopf (thead) “position: sticky” und geben Ihm die Postion “top: 0;”. Damit erreichen wir, dass der Kopf in der Höhe mitscrollt, was zu einer besseren Übersicht führt.

Und das wars, unsere responsive Tabelle mit dem geringst möglichen Aufwand ist fertig!

Fertige Lösung

Hier noch die fertige Lösung zur Ansicht und zum herumspielen.

Die Vor- und Nachteile der vorgestellten Lösung haben mich überzeugt, sie für mein Problem zu nutzen. Zur Erinnerung: Die Pluspunkte sind weniger Scrollen als beim Stapeln, schnelle Umsetzung, minimaler Overhead und eine gute Zugänglichkeit. Der einzige Haken ist, dass sie vielleicht nicht ideal für riesige Tabellen ist.

Falls Ihnen die Infos was gebracht haben, wie wär's dann mit einem Abo für meinen Newsletter? So bleiben Sie immer auf dem Laufenden, was in der webbaren Welt so läuft. Ach ja, und auf Facebook, Instagram und Twitter bin ich auch unterwegs – würde mich freuen, Sie da zu sehen!