Für Tabellen auf Websites gibt es viele Anwendungen: Die Präsentation von Daten, Ranglisten, Preisen, etc. Oder die Anordnung von Elementen in einem Raster, wie z.B. von Bildern. In WordPress waren Tabellen bis zur Einführung des Gutenberg-Editors im Wesentlichen eine Sache für HTML-Code oder Plugins.

Tabellen in WordPress, einfach erklärt

Hier sehen wir uns das Thema Tabellen in WordPress im Detail an: Mit Gutenberg und auch für jene, die eher den Classic-Editor bevorzugen. Dabei möchte ich auch darauf eingehen, was mit Tabellen passiert, wenn sie durch responsive Webdesign auf verschiedenen Bildschirmgrößen dargestellt werden.

Das Verhalten von Tabellen unterscheidet sich dabei nämlich etwas von anderen Raster-Strukturen wie z.B. in Spalten angeordnete Elemente, Daten, oder Bilder, weil z.B. Spalten über andere HTML-Elemente auf einer Website eingebaut und umgesetzt sind. Daher lohnt sich auch ein genauerer Blick auf Situationen, in denen man am ehesten Tabellen einsetzen sollte oder lieber keine.

Hier erfahren Sie mehr zu folgenden Themen:

Die Tabelle in HTML und ihre Struktur, kurz zusammengefasst

Eine Tabelle hat grundsätzlich eine bestimmte Anzahl von Zeilen und Spalten. Auf einer Website kann man eine Tabelle in einen Kopfzeilen-Bereich (HTML-Tag thead), einen Haupt-Bereich (tbody) und einen Fußzeilen-Bereich (tfoot) unterteilen. Alle diese Bereiche werden durch korrekt geöffnete und geschlossene HTML-Strukturen eingebaut:

<thead> .... </thead>
<tbody> .... </tbody>
<tfoot> .... </tfoot>

In jedem dieser Bereiche kann es mehrere Zeilen geben, in denen dann die Elemente für die einzelnen Spalten wie folgt aufgelistet werden:

<tr>
  <td> Inhalt Spalte 1 </td> 
  <td> Inhalt Spalte 2 </td> 
  <td> Inhalt Spalte 3 </td>
  ...
  <td> Inhalt letzte Spalte </td> 
</tr>

Außerdem gibt es noch ein spezielles HTML-Element th, das statt td verwendet wird, wenn die Zelle, die man in der Tabelle gerade einbaut, die Funktion einer Überschrift oder eines Ergebnisses hat und daher anders dargestellt werden soll.

Das geht übrigens nicht nur für Überschrifts-Zeilen sondern auch für Spalten. Im letzteren Fall schreibt man z.B.

<th scope="row"> Titel </th>

in die erste Spalte einer Zeile und erhält dort eine Überschrift für die Zeile.

Mit diesen Bausteinen kann man im Prinzip bereits jegliche Tabelle in HTML zusammensetzen. Die Darstellung wird dann über CSS-Befehle für die Tabelle erledigt. Dabei geht es z.B. darum, wo Trennlinien angezeigt werden oder welche Hintergrundfarbe die Zeilen haben, etc.

Eine Tabelle in WordPress Gutenberg erstellen

In Gutenberg, dem Standard-Editor in WordPress seit Version 5.0, kann eine Tabelle über einen Tabellen-Block erzeugt werden. Nach Eingabe der Anzahl von Zeilen und Spalten wird die Tabelle angezeigt und man kann sie mit Inhalten füllen. thead und tfoot lassen sich in einer Gutenberg-Tabelle jedoch (noch) nicht einstellen.

Ich habe in meinem kompletten Leidfaden zum Erstellen einer WordPress-Website bereits generell über die Arbeit mit dem Gutenberg-Editor in WordPress geschrieben. Wer sich noch nicht mit diesem Editor befasst hat, kann sich in meinem Artikel Schreiben in WordPress Gutenberg, einfach erklärt einen ersten Vorgeschmack holen. Dort erkläre ich auch das Block-Konzept etwas genauer.

Der Tabellen-Block in WordPress Gutenberg

Einen neuen Block im WordPress-Editor Gutenberg hinzufügen

Der Tabellen-Block gehört in WordPress Gutenberg zur Gruppe Formatierung. Der Block kann nach einem Klick auf das Plus-Symbol für das Einfügen eines neuen Blocks durch Klicken auf das Tabellen-Symbol eingefügt werden.

Die Gruppe Formatierungen von Blöcken im WordPress Editor Gutenberg

Danach wird an der Stelle des einzufügenden Blocks je ein Eingabefeld für die Anzahl der Zeilen und die Anzahl der Spalten angezeigt:

Eine neue Tabelle in WordPress Gutenberg einfügen: Auswahl der Anzahl von Zeilen und Spalten

In diesem Beispiel habe ich vier Zeilen und fünf Spalten ausgewählt. Durch einen Klick auf den Button Erstellen wird die Tabelle dann erzeugt und an der gleichen Stelle angezeigt.

Eine neue leere Tabelle in WordPress Gutenberg

Einstellungen für eine Tabelle in WordPress Gutenberg

Für eine Tabelle in WordPress Gutenberg gibt es nicht viele Einstellungen auf der Block-Ebene. Nachdem die Anzahl der Zeilen und Spalten fixiert sind, kann man nur noch den Stil zwischen Standard und Streifen umstellen, und außerdem die Breite der Tabellenzellen fixieren.

Die Einstellungen für einen Tabellen-Block in WordPress Gutenberg

Das ist allerdings auch schon alles. Weitere Darstellungsanpassungen können wie für alle Blöcke in Gutenberg durch einrichten einer eigenen CSS-Klasse oder überhaupt durch generelle CSS-Befehle vorgenommen werden.

Inhalte einer Tabelle in WordPress Gutenberg erstellen

Die Inhalte einer Tabelle in WordPress Gutenberg kann man einfach durch Anklicken einer Tabellenzelle und eintippen des Inhalts nach und nach in die Zellen eingeben. Von einer Zelle zur nächsten springt man mit der Tabulator-Taste. Alternativ klickt man in die nächste Zelle, deren Inhalt man bearbeiten möchte.

Inhalte in eine neue Tabelle im Gutenberg-Editor in WordPress einfügen

Im Screenshot sieht man, dass die erste Zelle der Tabelle markiert ist. Dort kann man nun Inhalte eintippen. Mit der Zeit füllt sich so die Tabelle

Eine Tabelle in WordPress Gutenberg mit zwei Elementen

und man bekommt einen Überblick über die Breite, die für die einzelnen Spalten und die gesamte Tabelle benötigt wird:

Eine Tabelle in WordPress Gutenberg mit vollständig gefüllter Kopfzeile

Nach und nach kann man so die Tabelle fertig mit Inhalten füllen. Wem die Standard-Variante des Tabellen-Stils übrigens nicht so gut gefällt, der kann den Stil rasch auf Streifen umstellen und bekommt etwa Folgendes zu sehen:

Eine Tabelle in WordPress Gutenberg im Streifen-Stil

Die Struktur einer bestehenden Tabelle in WordPress Gutenberg ändern

Die Struktur einer bereits bestehenden, aktiven Tabelle in WordPress Gutenberg kann jederzeit durch einen Klick auf das Tabellen-Struktur-Symbol im oberen Menü des Editors verändert werden. Dadurch öffnet sich ein Menü, das es erlaubt, Zeilen und Spalten an geeigneter Stelle hinzuzufügen oder zu löschen.

Die Struktur einer bestehenden Tabelle in WordPress Gutenberg verändern, Spalten oder Zeilen hinzufügen oder löschen

Einschränkungen für Tabellen in WordPress Gutenberg

Mit diesen Informationen kann man Tabellen im Gutenberg-Editor von WordPress also inhaltlich und strukturell verändern und einrichten, wie man es möchte. Einige Einschränkungen sind mir allerdings aufgefallen:

  • Es ist nicht einfach möglich, die Zeilen in der Tabelle dem Kopfzeilen-Bereich oder dem Fußzeilen-Bereich der Tabelle zuzuweisen. De facto scheint es diese Bereiche in einer Tabelle in WordPress Gutenberg zunächst einmal nicht zu geben.
  • Es ist nicht einfach möglich, die Zellen in der Tabelle als Überschrifts-Zellen zu definieren. Scheinbar gibt es auch diese Unterscheidung für Tabellenzellen derzeit in Gutenberg (noch) nicht.
  • Stil-Angaben, die über Standard und Streifen hinausgehen, muss man quasi per Hand als eigene CSS-Befehle in WordPress unterbringen. Je nach Komplexität der Tabelle und der darstellerischen Vorgaben, kann das ziemlich mühsam werden.

Hier besteht also noch Handlungsbedarf, um die Lücke zu voll-konfigurierbaren Tabellen in ausgereiften Tabellen-Plugins zu schließen, siehe auch etwas weiter unten.

Tabellen im WordPress Classic Editor

Der Standard-Editor in WordPress vor Version 5.0 wird inzwischen liebevoll als Classic Editor bezeichnet. Trotz der Einführung von Gutenberg ist der Classic Editor für viele WordPress Benutzer nach wie vor das Werkzeug der Wahl. Dafür gibt es verschiedene Gründe, und darüber kann man auch streiten, aber das will ich hier nicht wiedergeben.

Ich persönlich verwende z.B. hier auf WebsiteBerater.com den Classic-Editor, habe aber auch auf anderen Websites bereits (gemischte) Erfahrung mit Gutenberg gesammelt. Man wird sehen, wie sich Gutenberg in Zukunft noch weiter entwickelt.

Fakt ist jedenfalls, dass Tabellen im Classic Editor als solche nicht enthalten waren und sind. Daher muss man sich irgendwie behelfen, um Tabellen im Classic Editor in WordPress zu erzeugen. Dafür gibt es jedoch mehrere Möglichkeiten: Direkt als HTML, oder per WordPress Plugin, und davon gibt es einige.

Und ganz unten werde ich auch noch einen halb-schrägen Hack beschreiben, wie man Tabellen recht einfach auch noch auf eine WordPress-Website bekommen kann. Aber immer schön der Reihe nach.

Eine Tabelle in WordPress direkt in HTML schreiben

Die geradlinigste Variante, eine Tabelle im Classic Editor in WordPress unterzubringen ist, sie direkt als HTML-Code in der Text-Version des Editors einzugeben.

Das funktioniert genauso, wie es soll, mit thead, tfoot, und allem Drum und Dran. Man kann nach belieben auch th-Zellen verteilen und CSS-Klassen und auch CSS-IDs vergeben. Dadurch steht auch dem perfekten Styling für die Tabelle nach Fertigstellung der Inhalte per detaillierter CSS-Befehls-Gruppe nichts mehr im Weg.

Wenn die Tabelle in der Text-Version des Classic-Editors fertig geschrieben ist, dann wird sie in der visuellen Version des Classic Editors auch richtig erkannt und angezeigt. Man bracht also nur für die Tabelle selbst zu Text wechseln und kann direkt danach (und natürlich auch davor) mit dem üblichen Visuellen Editor arbeiten.

Diese Variante lässt sich übrigens auch in Gutenberg umsetzen, wo es nicht nur einen Tabellen-Block, sondern auch einen HTML-Block gibt. Dort kann man dann seine Tabelle mit allem Schnickschnack, äh, mit allen laut HTML-Standard zur Verfügung stehenden Elementen, gestalten und auch optimal für CSS-Styling vorbereiten.

WordPress Plugins für Tabellen

Da das Schreiben von HTML-Code aber nicht jedermanns Sache ist und vor allem nicht für viele WordPress-Benutzer, gibt es eine Lösung, in der das Coden der Tabelle bereits von jemandem übernommen wurde: WordPress-Plugins für Tabellen.

Hier gibt es einiges an Auswahl. Ich persönlich habe mit dem TablePress Plugin für WordPress sehr gute Erfahrungen gemacht, weshalb ich dieses im Folgenden als Beispiel im Detail durchgehen möchte.

Das TablePress WordPress Plugin

Das TablePress Plugin für WordPress ist schon ein alter Hase unter den Tabellen-Plugins für WordPress. Es ist kostenlos, über das WordPress-Repository erhältlich und ziemlich weit verbreitet (derzeit bei 700k+ aktiven Installationen). Die Bewertungen des Plugins sind überwältigend positiv und es wird ständig aktuell gehalten.

Aufgrund dieser Eigenschaften ist es ein Musterbeispiel dafür, was ein vertrauenswürdiges WordPress-Plugin ausmacht. Mehr zum Thema WordPress Plugins im Allgemeinen und wie man mit Plugins umgeht, habe ich in meinem Artikel WordPress Plugins, einfach erklärt genau beschrieben.

Installation des TablePress WordPress Plugins

Man installiert das Plugin durch einen Klick auf den Unterpunkt Installieren des Menüpunkts Plugins im linken Seitenmenü des WordPress-Dasbhoards. Dadurch öffnet sich die Seite Plugin hinzufügen und man gibt im Suchfenster einfach direkt tablepress ein. In den Suchresultaten findet man an erster Stelle Folgendes:

Das WordPress-Plugin TablePress installieren

und klickt zur Installation auf den Button Jetzt installieren. Nach einigen Sekunden ist das Plugin installiert und ein neuer Button wird angezeigt: Aktivieren. Durch einen Klick darauf ist das Plugin aktiviert und kann verwendet werden.

Einstellungen für das TablePress WordPress Plugin

Das TablePress Plugin erzeugt im linken Seitenmenü des WordPress Dashboards eine kleine Gruppe von Menüeinträgen unter dem Titel TablePress, siehe auch den Screenshot im nächsten Abschnitt. Dort findet sich auch der Unterpunkt Einstellungen.

Da jede Tabelle in TablePress für sich bis ins Detail konfigurierbar ist, hat man bei den generellen Einstellungen nicht viel zu tun.

Die Einstellungen für das WordPress-Plugin TablePress

Was man tun kann, ist einerseits, die Position des Menüs zu TablePress innerhalb des WordPress-Dashboards zu verändern. Andererseits kann man hier CSS-Befehle eingeben, die zu den erzeugten Tabellen gehören und deren Aussehen verändern. Nun soll es aber mit der ersten Tabelle weitergehen.

Eine Tabelle in WordPress mit TablePress erstellen

Eine neue Tabelle im WordPress-Dashboard mit TablePress erstellen

Eine Tabelle kann in WordPress mit dem Plugin TablePress erstellt werden. Dazu klickt man im WordPress-Dashboard im linken Seitenmenü auf das Menü TablePress und darin auf Neue Tabelle. Nach Eingabe eines Namens und der Anzahl der Zeilen und Spalten für die neue Tabelle erzeugt man diese durch einen Klick auf den Button Tabelle hinzufügen.

Eine neue Tabelle in WordPress mit dem Plugin TablePress erstellen: Diese Beispieltabelle wird vier Zeilen und fünf Spalten haben.

Im konkreten Beispiel in diesem Screenshot soll unsere neue Tabelle genau wie oben beim Gutenberg-Beispiel wieder vier Zeilen und fünf Spalten haben. Der Name sollte unter den Namen aller solcher Tabellen einer WordPress-Website eindeutig sein, damit man die Tabelle in der Liste aller Tabellen in TablePress leichter identifizieren und bearbeiten kann.

Jede Tabelle bekommt allerdings grundsätzlich eine eindeutige, automatisch vergebene, ansteigende ID-Nummer zugeteilt, anhand derer man sie immer auch eindeutig identifizieren kann.

Die Übersicht über alle Tabellen in TablePress

Zur Übersicht über alle derzeit in TablePress vorhandenen Tabellen gelangt man durch einen Klick auf den Menüeintrag TablePress im linken Seitenmenüs des WordPress-Dashboards. Dort werden die vorhandenen Tabellen in einer Liste angezeigt, die sehr ähnlich aussieht wie z.B. die Liste der installierten Plugins.

An dieser Stelle ist es nun auch Zeit, die grundlegende Funktionsweise von TablePress kurz zu erklären. Denn was macht man nun mit dieser Liste? Und wie kann man eine dieser Tabellen auf der eigenen WordPress-Website auch tatsächlich einbauen und wo?

Die Funktionsweise von TablePress, einfach erklärt

TablePress verwaltet Tabellen über eine Liste, in der für jede einzelne Tabelle, die vom WordPress-Benutzer erzeugt worden ist, eine eindeutige ID, der Name der Tabelle, der Autor und das Datum der letzen Modifikation angezeigt wird. TablePress-Tabellen können über einen Shortcode an (fast) beliebigen Stellen auf der WordPress-Website platziert werden.

Zunächst zur Liste: Wenn eine Tabelle in der Liste verändert wird (wie das geht, beschreibe ich gleich genauer im nächsten Abschnitt), dann wird die Tabelle global verändert. Das Einbinden über Shortcodes ist sehr einfach (ich erkläre es gleich genauer). Zentral ist dabei die Angabe der ID der Tabelle im Shortcode.

Nun zu den auf der WordPress-Website eingebundenen Instanzen der Tabellen: WordPress holt bei jeder Erzeugung einer bestimmten Seite oder eines Beitrags, in dem eine Tabelle per Shortcode eingebunden ist, die aktuelle Information über diese Tabelle aus der Datenbank. Da man Shortcodes auch mehrfach einsetzen kann, bedeutet das wie gesagt, dass sich durch eine zentrale Änderung der Tabelle auch alle irgendwo eingebundenen Instanzen verändern.

Eine Tabelle in TablePress bearbeiten

Eine Tabelle kann in TablePress bearbeitet werden, indem man sie aus der Liste der vorhandenen Tabellen durch einen Klick auf den Titel auswählt oder direkt nach dem Erstellen der Tabelle im Bearbeitungsmodus der Tabelle bleibt. Hier kann man Namen, Inhalt und Layout der Tabelle nach Belieben ändern.

Informationen über die Tabelle

Zunächst sieht man in dieser recht umfangreichen Ansicht die Informationen über die Tabelle:

Informationen über eine Tabelle im WordPress-Plugin TablePress

Hier kann man noch den Namen und die Beschreibung der Tabelle anpassen, wenn nötig. Rechts neben der ID befindet sich noch ein Feld mit dem WordPress-Shortcode für diese Tabelle, der für das Einfügen der Tabelle in einem Beitrag benötigt wird. Dazu kommen wir gleich noch.

Inhalte einer Tabelle in TablePress einfügen

Danach kommt bereits der Bereich mit den Inhalten der Tabelle. Wenn man eine Tabelle zur Bearbeitung öffnet, werden hier eventuell Tipps angezeigt, die für die weitere Arbeit mit TablePress hilfreich sind:

Bei der Bearbeitung einer Tabelle in TablePress werden hilfreiche Tipps angezeigt

Nachdem man den Tipp weggeklickt hat, kann man sich daran machen, die Tabelle mit Inhalten zu füllen. Dazu kann man die Buttons unterhalb der Tabellenstruktur verwenden, die man hier im Screenshot bereits sehen kann: Ein Bild einfügen, den Erweiterten Editor für eine Zelle öffnen oder einen Link einfügen.

Der erweiterte Editor öffnet dabei eine Miniatur-Variante von tinyMCE, auf dem der Classic Editor basiert, sodass man mit Text, Bildern und Links und etwas Formatierung gleichzeitig arbeiten kann. Wer aber nur Text in die Zellen eingeben möchte, der kann das am besten direkt tun:

Inhalte in eine Zelle einer Tabelle in TablePress eintragen

Mit den im oberen vorherigen Screenshot auch gezeigten Buttons am unteren Rand und den kleinen Kästchen, die in diesem Screenshot vor jeder Zeile und unter jeder Spalte zu sehen sind, kann man übrigens die Struktur der Tabelle nach Belieben ändern: Zeilen löschen, einfügen, sortieren (über die kleinen Pfeilchen oben an den Spalten), etc. Diese Funktionen sind ziemlich selbsterklärend.

Einstellungen zu einer Tabelle in TablePress

Als nächstes kommen noch zwei Gruppen von Einstellungen zur Tabelle, die ich hier zeigen und kurz diskutieren möchte, weil sie dem WordPress und TablePress-Benutzer hier die Kontrolle über all das geben, was Tabellen in HTML eigentlich können (sollten), inklusive dynamischer Sortierbarkeit durch den Website-Besucher. Aber schön der Reihe nach.

Zunächst hat man die Einstellungen dieser Tabelle vor sich:

Die Einstellungen zu einer Tabelle im WordPress-Plugin TablePress

Hier sieht man zuerst gleich einmal die beiden Möglichkeiten, einen thead und tfoot mit der ersten und der letzten Zeile der Tabelle zu erzeugen. Außerdem kann man die Streifen für Zeilen über die abwechselnden Hintergrundfarben aktivieren. Das empfehle ich übrigens bei großen Tabellen, denn es erhöht die Übersichtlichkeit der Tabelle deutlich.

Zusätzlich zu den Streifen gibt es auch eine Option, die jene Zeile hervorhebt, über der sich gerade der Mauszeiger befindet (finde ich auch praktisch). Dann kann man noch den Namen und die Beschreibung der Tabelle automatisch mit der Tabelle anzeigen lassen. Das CSS-Feld erlaubt es, dieser Tabelle bestimmte CSS-Klassen zuzuweisen (keine CSS-Befehle!).

Einstellungen zu dynamischen Tabellen für Website-Besucher

Und zu guter Letzt gibt es noch einige dynamisch Tricks, die eine Tabelle mittels JavaScript nutzen kann. Hier ist die Übersicht:

Die DataTables-JavaScript-Einstellungen zu einer Tabelle im WordPress-Plugin TablePress

Diese Optionen erklären sich selbst. Ich habe das bereits erfolgreich z.B. für Ergebnis-Tabellen von Sportereignissen genutzt. Dort können Teilnehmer sich z.B. über die Suchfunktion in der Tabelle finden, oder die Tabelle nach z.B. Rundenzeiten sortieren lassen, etc. Das alles passiert dann live und ohne Neuladen der Seite, da es über JavaScript gesteuert wird.

EineTablePress-Tabelle in WordPress verwenden und platzieren

Eine TablePress-Tabelle kann in WordPress mit Hilfe eines WordPress-Shortcodes auf Seiten, Beiträgen, aber auch in Text-Widgets ganz einfach platziert werden. Dazu kopiert man den Shortcode mit der ID jener Tabelle, die man einbinden möchte, an die gewünschte Stelle. Eine Vorschau des Beitrags erlaubt eine Kontrolle der Tabelle vor der Publikation.

Der Shortcode in TablePress für die Tabelle mit der ID=1 lautet:

Shortcode-Beispiel für eine Tabelle in WordPress über TablePress

Wo man also diesen Shortcode hinein kopiert, dort wird die Tabelle angezeigt. Den Shortcode kann man sich, wie bereits erwähnt, ganz oben aus der Detailansicht jeder Tabelle kopieren, wo er am rechten Rand bei den Informationen über die Tabelle angezeigt wird.

Der Shortcode für eine Tabelle im WordPress-Plugin TablePress

Und, wie auch schon gesagt, eine Tabelle kann man durch Verwendung ihres Shortcodes an mehreren Stellen auf der WordPress-Website überall dort ganz aktuell einbinden.

Alternativ kann man im WordPress Classic Editor auch einen Button in der Werkzeugleiste benutzen, der durch das TablePress Plugin dort zur Verfügung gestellt wird.

Eine TablePress-Tabelle im WordPress Classic Editor über einen Button in der Werkzeugleiste einfügen

Wenn man auf den Button klickt, öffnet sich ein Dialogfenster, in dem man jene Tabelle aus der Liste aller in TablePress verfügbaren Tabellen auswählen kann, die man einfügen möchte.

Auswahl der gewünschten Tabelle zum Einfügen über den TablePress-Button in der Werkzeugleiste des Classic Editors in WordPress

Durch einen Klick auf den Button Shortcode einfügen rechts neben der gewünschten Tabelle wird an der Stelle, wo sich der Cursor gerade befindet, der korrekte WordPress-Shortcode mit der richtigen ID für diese Tabelle eingefügt.

Wichtig: Änderungen in der Tabelle speichern!

Nun bleibt nur noch der Hinweis darauf, alle Änderungen einer Tabelle mit dem Button Änderungen speichern auch tatsächlich zu speichern. Er befindet sich zusammen mit dem Vorschau Button sowohl ganz unten als auch ganz oben in der Detailansicht für eine Tabelle.

Eine TablePress Tabelle speichern, kopieren oder exportieren

Ganz unten hat man übrigens auch noch die Möglichkeit, eine Tabelle zu kopieren, zu exportieren (als CSV, HTML oder JSON Datei) oder zu löschen. TablePress liefert somit eine Umfangreiche und ziemlich mächtige Benutzeroberfläche zur Erzeugung und Verwaltung von Tabellen in WordPress.

Tabellen in WordPress und responsive Webdesign

Responsive Webdesign ist in der heutigen Zeit ein wichtiges Thema. Das liegt daran, dass bereits rund die Hälfte aller Website-Zugriffe von mobilen Geräten aus stattfinden. Diese globale Zahl variiert allerdings von Land zu Land und auch von Thema zu Thema.

Wieviele Besucher meiner Website surfen wirklich auf dem Smartphone oder Tablet?

Hier auf WebsiteBerater.com z.B. lag der Prozentsatz aller Zugriffe, die von mobilen Geräten kamen, in der zweiten Jahreshälfte 2018 bei etwa 20%. Auf anderen Seiten, die ich manage, sehe ich allerdings bei den Zugriffen auch mobile Anteile von 60% und darüber.

Insgesamt bestimmen mehrere Faktoren den Anteil der mobilen Besucher einer Website:

  • Das Thema der Website:
    Bei welcher Gelegenheit sehen sich die Besucher der Website diese an oder suchen nach Inhalten zu diesem Thema?

    • Beispiel WebsiteBerater.com: Eine Website zu erstellen ist wohl immer noch eine Tätigkeit oder ein Thema, das man an einem Desktop PC bearbeitet und nicht unbedingt am Smartphone. Wenn jemand also beim Erstellen der Website etwas sucht, wird das überwiegend mit dem PC passieren.
  • Der Kanal, über den die Besucher auf die Website gelangen:
    Wenn das z.B. hauptsächlich Facebook (also referral) ist, weil man sehr viel Facebook-Werbung macht, und die Werbung von Facebook seinen Usern eben besonders gerne auf dem Smartphone präsentiert wird, dann wird der mobile Anteil an den Website-Besuchern eben auch entsprechend höher sein.
  • Die Situation, in der die Besucher üblicherweise nach Inhalten auf der Website suchen oder diese Lesen. Beispiele für solche Situationen sind:
    • Unterwegs im Bus
    • Bei der Arbeit
    • Wenn man gerade zufällig zwischendurch 2 Minuten Zeit hat
    • Zu Hause
    • Im Urlaub

Wirkliche Auskunft hierüber gibt am besten der Punkt AudienceMobileOverview in Google Analytics. Falls Sie Google Analytics auf Ihrer Website noch nicht nutzen, lassen Sie sich wertvolle Daten über das Besucherverhalten auf Ihrer Website entgehen. Lesen Sie in diesem Fall bitte unbedingt gleich meinen Artikel 3 super-schnelle Schritte zu Google Analytics.

Wie bekomme ich responsive Webdesign auf meiner Website?

Genau diese Frage habe ich bereits in meinem Artikel Wie erreiche ich responsive Webdesign? im Detail diskutiert. Responsive Webdesign ist zwar wichtig, aber es ist ja nicht von vornherein klar, ob man das für die eigene Website bereits hat oder nicht. Die verwandte Frage lautet hier also auch:

Hat meine Website vielleicht schon responsive Webdesign?

Wenn Sie für Ihre Website WordPress und ein modernes Theme verwenden, dann ist die Antwort auf die gerade gestellte Frage ziemlich wahrscheinlich Ja. Selbst, wenn Ihre Website nicht responsiv ist, wird sie übrigens natürlich trotzdem auf Mobilgeräten angezeigt, allerdings genau gleich wie auf einem Desktop PC.

Das Problem dabei ist üblicherweise, dass man kaum etwas lesen kann (weil die Schrift im Verhältnis zur Bildschirmbreite zu klein ist) oder dass das Design schlicht und einfach auf dem Mobiltelefon nicht funktioniert. Paradebeispiel ist ein Desktop-Menü, bei dem man normalerweise auf einem Smartphone-Bildschirm keine Chance hat, ohne massives Zoomen auf den richtigen Menüpunkt zu klicken.

Warum sind Tabellen beim responsive Webdesign möglicherweise problematisch?

Beim responsive Webdesign werden auf der Website vorhandene Elemente je nach Breite der Elemente und Breite des verwendeten Bildschirms anders angeordnet. Aus vier Bildern (oder Info-Kästen) nebeneinander werden dann z.B. auf dem Tablet je zwei nebeneinander, auf dem Smartphone nur eins pro Zeile. Dies ist eine Änderung der Darstellung, die bei Tabellen so nicht funktioniert.

Die Tabelle hat Prinzipiell eine Breite, die auf einen Prozentsatz der Bildschirmbreite oder der vorhandenen Container-Elemente auf der Website eingestellt ist. Soweit, so gut. Die Tabelle hat aber auch eine fixe Anzahl von Spalten, weil eine variable Anzahl der Spalten die Zusammenhänge der Daten innerhalb der Tabelle komplett zerstörten würde.

Das bedeutet, dass auf einem schmäleren Bildschirm auch weniger Platz für jede einzelne Spaltenbreite zur Verfügung steht, wenn die Tabellenbreite sich auf die Bildschirmbreite oder weniger reduzieren muss. Durch zu schmale Spalten wird dann vermutlich der Spalteninhalt verstümmelt (Wörter unkontrolliert umgebrochen, etc.).

Was passiert mit Tabellen in WordPress bei responsive Webdesign?

Nach diesen grundsätzlichen Überlegungen ist es aber auch interessant, nachzusehen, was wirklich mit Tabellen passiert, wenn sie in so eine Situation kommen. Als Beispiel möchte ich eine Ergebnistabelle eines Sportereignisses hernehmen, die ich einmal vor einigen Jahren mit TablePress erstellt habe.

Die Tabelle befindet sich auf einer Website mit einem sogenannten Boxed Layout, d.h. es gibt einen Bereich mit fixer Breite, in dem der Inhalt der Website platziert wird. Außerdem hat der Beitrag, auf dem die Tabelle zu sehen ist, noch ein Sidebar, d.h. insgesamt ist die Breite der Originaltabelle bereits nicht sehr groß, aber wenn man sich diesen Screenshot vom Desktop ansieht, ist klar, dass es bereits mit etwas geringerer Breite interessant wird:

Eine in TablePress erzeugte Tabelle auf einer WordPress-Website: Ansicht auf dem Desktop im Querformat

Auf dem Smartphone im Hochformat (das ist der Extremfall für die geringste Breite eines Bildschirms) sieht die Sache so aus:

Eine in TablePress erzeugte Tabelle auf einer WordPress-Website: Ansicht auf dem Smartphone im Hochformat

Im Querformat auf dem Smartphone wird die Situation mit der Gesamtübersicht etwas besser, etwa so:

Eine in TablePress erzeugte Tabelle auf einer WordPress-Website: Ansicht auf dem Smartphone im Querformat

Was ist also passiert?

Eine TablePress-Tabelle in Responsive Webdesign

Folgende Dinge machen die TablePress-Tabelle auch in dieser extremen Situation weiterhin lesbar:

  • Die Schriftgröße der Einträge in der Tabelle ist gleich wie im Text, also gut leserlich.
  • Die Breiten der Spalten der Tabelle sind nach wie vor an die Inhalte angepasst, sodass nichts abgeschnitten oder verbogen oder sonst irgendwie verstümmelt wird.
  • Die Tabelle hat trotz eingeschränkter Breite des Website-Inhalts im Boxed Layout noch immer die nötige Breite, sodass alle Spalten sichtbar sind, denn
  • Die Tabelle ragt rechts über den Rand der Website hinaus, und
  • Der Tabelle kann nach rechts und links auf dem Smartphone gescrollt werden, sodass man alle Bereiche davon sehen und lesen kann, wenn auch nicht gleichzeitig.
  • Bonus: Man kann durch Herauszoomen die Tabelle auch in ihrer Gesamtheit sehen. Dabei wird allerdings die gesamte Darstellung kleiner skaliert, wodurch auch die Schrift immer kleiner wird. Trotzdem kann so eine Aktion aus Gründen der Übersicht sinnvoll sein. Das sieht dann so aus:Eine in TablePress erzeugte Tabelle auf einer WordPress-Website: Ansicht auf dem Smartphone im Hochformat, herausgezoomt

Fazit: TablePress erzeugt Tabellen in WordPress, die auch auf Smartphones funktionieren, egal ob das Design responsiv ist oder nicht

Genau so ist es. Damit hat man eine Lösung für das Problem Tabellen im responsive Webdesign an der Hand, die funktioniert, indem sie die Tabelle im Detail ideal leserlich macht. Dadurch geht zwar bei responsivem Design unmittelbar der Überblick über die gesamte Tabelle verloren, sie ist aber scrollbar und dadurch voll zugänglich.

Tabellen-Hack: Die Tabelle in WordPress als Bild einbinden

Am Ende dieses Beitrags soll eine Möglichkeit nicht unerwähnt bleiben, die man eigentlich immer hat, wenn man Inhalte auf einer Website darstellen will, die sich nicht verändern sollen, egal auf welchem Gerät die Website angesehen wird. Dabei erzeugt man das gewünschte Objekt in irgendeiner Software, macht ein Bild davon und bindet dann das Bild normal in WordPress ein.

Bei wirklich großen Tabellen (oder sonstigen Objekten) kann es schwierig werden, ein Bild der Tabelle in ihrer Gesamtheit zu machen, das man auch gut herzeigen kann. Außerdem wird ja die Lesbarkeit der Informationen auf dem Bild nicht besser, wenn es in seiner Gesamtheit, dafür aber klein dargestellt wird.

Ich bin mir also durchaus bewusst, dass es sich hier nicht um die ideale Lösung des Problems handelt, aber wer weiß, vielleicht haben Sie einen Fall vor sich, in dem diese Vorgangsweise sogar sinnvoll ist. Diese Methode habe ich übrigens auch für einen ähnlichen Fall erwähnt, wo es darum geht, in WordPress mehrere Bilder nebeneinander anzuordnen.

Weitere Informationen zu WordPress-Websites

Falls Sie gerade an einer WordPress-Website arbeiten, interessieren Sie sich vielleicht für verschiedene Schritte dieses Prozesses. Dann empfehle ich Ihnen einen Blick auf meine komplette Anleitung zum Erstellen einer WordPress Website. Viel Vergnügen beim Lesen!

Pin It on Pinterest