Tabellen in WordPress

Tabellen ansprechend darstellen

Manche Informationen benötigen zur optischen Visualisierung eine Tabelle. Was tun, wenn die Bordmittel von WordPress nicht ausreichen? Wie lassen sich Tabellen am besten auf dem Mobiltelefon darstellen? Inhalte auf einer Website, die mittels einer Tabelle dargestellt werden, bedürfen der besonderen Aufmerksamkeit, denn Tabellen und die kleinen Displays von Mobilgeräten sind zwei Welten, die nicht sonderlich gut zusammen passen.

Tabellen nach WordPress importieren

Von Haus bietet WordPress Gutenberg das Erstellen von Tabellen in einem Beitrag, letztlich aber nur recht einfache Varianten mit Kopf- und Fußzeile sowie dem Tabelleninhalt. Die Umwandlung, der Im- und Export, außer über die Möglichkeit Tabellen als wieder verwendbare Blöcke zu speichern, sind nicht im Umfang enthalten.

Tipp

Plugin TablePress

Das Plugin TablePress ermöglicht das zentrale Erstellen und Verwalten von Tabellen in Artikeln und Seiten, die Einbindung über Shortcodes an beliebigen Stellen innerhalb der Website und fügt bei Bedarf für Besucher:innen nützliche Funktionen wie die Sortierung von Spalten, Seitennummerierung, Filter und mehr hinzu. Besonders letztere und die Import- bzw. Exportfunktionen beispielsweise aus Tabellenkalkulationen wie Exel oder LibreOffice Calc bzw. als Tab getrenntes File machen das Plugin zu einem meiner Favoriten. Darüber hinaus hat jede Tabelle bestimmte Klassen, die als Selektoren genutzt werden können, sodass diese ganz an das Layout der eigenen Homepage angepasst werden können.

Zum Artikel

Tabellen responsiv gestalten

Wer kennt vielleicht noch die Zeiten, wo Tabellen das Mittel erster Wahl waren, um ganze Layouts von Webseiten zu gestalten. Heute dienen Tabellen nur noch ihrem eigentlichen Zweck, der Aufbereitung von Inhalten. Während das Exelsheet auf dem Desktop perfekt rüberkommt, wird es auf kleinen Bildschirmen schnell unübersichtlich.

Inhalte ändern

Überflüssiges Ausblenden

Zeilen bzw. Spalten in Tabellen können Klassen zugewiesen werden, mit dem Ziel abhängig von der Größe des Bildschirms der Besucher:innen über display:none bzw. visibility:hidden diese Zeilen oder Spalten nicht anzuzeigen. Dies würde aber zum einen dem Ansatz Mobile First widersprechen und zum anderen für Redakteure ohne größere Kenntnisse die Wartung bei dynamischen Tabellen unnötig erschweren.

Scrollen nach rechts erzwingen

Scroll Snapp

Eine längere Seite, auch so manche Darstellung als One Page, mag auf dem Desktop übersichtlich erscheinen, auf dem Tablet, spätestens dem Handy ist diese jedoch oft dahin. Mit der passenden Cascading Stylesheet Eigenschaft scroll-snap kann man diese Übersichtlichkeit wieder herstellen. Statt nach unten lässt man einzelne Bereiche horizontal scrollen, auf Mobilgeräten kann der User dann nach rechts bzw. links wischen. Usability und User Experience werden deutlich verbessert. Schön umsetzen kann man dies im Zusammenspiel mit Bootstrap Cards.

Script basierte Lösungen

JavaScript nutzen

Sollte die erste Spalte die wichtigste sein, sodass beabsichtigt ist, dass diese immer sichtbar ist und weitere Spalten mit dieser verglichen werden, bietet sich das Framework der Zurp Foundation an: zurb.com.

Eine andere Möglichkeit bietet FooTable, das seine Stärken insbesondere in Kombination mit Bootstrap ausspielt. Zellen innerhalb von Tabellen müssen hierzu mit Data-Attributen versehen werden, die Umstellung je nach Größe des Geräts des Nutzers übernimmt das Script: fooplugins.github.io.

Besteht kein Einfluss auf die Auszeichnung der Tabelle, wie es oftmals der Fall, wenn der Kunde in seinem Content-Management-System selbständig Tabellen erstellt, kann u.U. jQuery weiterhelfen, um der Tabelle etwa ein class=responsive zu verpassen bzw. diese mit einem div=scrollsnapp-container zu umschließen.

Unabhängig wie Tabellen dargestellt werden, gibt es gerade, wenn diese Termine abbilden, den Wunsch nur aktuelle Veranstaltungen anzuzeigen. Auch dies lässt sich mit einem Skript umsetzen.