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 Block-Editors im Wesentlichen eine Sache für HTML-Code oder Plugins.

Hier sehen wir uns das Thema Tabellen in WordPress im Detail an: Mit dem Block-Editor und auch für jene, die eher den Classic Editor verwenden. Dabei beantworte ich auch die Frage, die zu diesem Thema am häufigsten gestellt wird: Wie ändert man die Breite einer Spalte? Und ich zeige, was mit Tabellen auf dem Smartphone passiert und wie man verhindert, dass sie dort unlesbar 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.

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 einfügen (Block-Editor)

Im Block-Editor (früher Gutenberg genannt), dem Standard-Editor in WordPress seit Version 5.0, fügt man eine Tabelle mit dem Block Tabelle ein. Nach Eingabe der Anzahl von Spalten und Zeilen wird die Tabelle angezeigt und man kann sie mit Inhalten füllen. Kopf- und Fußzeile (thead und tfoot) schaltet man in den Einstellungen des Blocks dazu.

Ich habe in meinem kompletten Leitfaden zum Erstellen einer WordPress-Website bereits generell über die Arbeit mit dem Block-Editor in WordPress geschrieben. Wer sich noch nicht mit diesem Editor befasst hat, findet in meinem Artikel Der WordPress Block-Editor (Gutenberg), einfach erklärt eine Einführung. Dort erkläre ich auch das Block-Konzept genauer.

Der Tabellen-Block im WordPress Block-Editor

Der Block Tabelle gehört im Block-Editor zur Kategorie Text. Am schnellsten fügt man ihn ein, indem man in einem leeren Absatz /tabelle tippt und den Vorschlag mit der Eingabetaste übernimmt. Alternativ öffnet man mit dem Plus-Symbol links oben, dem Block-Inserter, die Liste aller Blöcke und sucht dort nach „Tabelle“.

Danach zeigt der Block je ein Eingabefeld für die Anzahl der Spalten und die Anzahl der Zeilen. Ein Klick auf Tabelle erstellen erzeugt die leere Tabelle an dieser Stelle.

Stehen die Daten schon in einer Tabellenkalkulation, muss man sie nicht abtippen: Kopieren Sie die Zellen z.B. in Excel, LibreOffice oder Google Tabellen und fügen Sie sie im Block-Editor in einen leeren Absatz ein. Der Editor erkennt die Tabelle in der Zwischenablage und macht daraus einen Tabellen-Block. Das gilt auch für eine Tabelle, die Sie von einer anderen Webseite kopieren.

Einstellungen für eine Tabelle im WordPress Block-Editor

Die Einstellungen eines Blocks sieht man in der rechten Seitenleiste, sobald der Block ausgewählt ist (falls sie fehlt: Zahnrad-Symbol Einstellungen rechts oben). Für den Tabellen-Block gibt es dort im Bereich Einstellungen drei Schalter:

• Zellen mit fester Breite: Ist dieser Schalter an, sind alle Spalten gleich breit, egal wie viel in ihnen steht. Seit WordPress 6.6 ist er bei neuen Tabellen standardmäßig eingeschaltet. Was das für die Spaltenbreite und auf dem Smartphone bedeutet, erkläre ich gleich unten.
• Kopfzeile: fügt eine Kopfzeile (thead) hinzu.
• Fußzeile: fügt eine Fußzeile (tfoot) hinzu.

Unter Stile wählt man zwischen Standard und Streifen (abwechselnd gefärbte Zeilen). Dazu kommen, je nach Theme, Einstellungen für Farbe (Text und Hintergrund), Typografie, Abstände und Ränder. Wie die Tabelle am Ende genau aussieht, bestimmt aber zu einem guten Teil das Theme.

Hinweis: Die eingestellte Anzahl für Zeilen und Spalten bezieht sich immer nur auf den Teil der Tabelle zwischen Kopf- und Fußzeile. Man braucht diese beiden also nicht beim Erstellen der Tabelle mitzuzählen.

Inhalte einer Tabelle im WordPress Block-Editor erstellen

Die Inhalte einer Tabelle im WordPress Block-Editor 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.

In der Werkzeugleiste über dem Block stehen dabei auch für Tabellenzellen die üblichen Textwerkzeuge zur Verfügung, also z.B. fett, kursiv oder ein Link. Über Spaltenausrichtung ändern richtet man die Spalte, in der die markierte Zelle steht, links, mittig oder rechts aus. Und über Beschriftung hinzufügen bekommt die Tabelle eine Beschriftung darunter.

Die Struktur einer bestehenden Tabelle im WordPress Block-Editor ändern

Die Struktur einer bestehenden Tabelle verändert man über das Symbol Tabelle bearbeiten in der Werkzeugleiste des Blocks. Es öffnet ein Menü mit Zeile darüber einfügen, Zeile darunter einfügen, Zeile löschen, Spalte links einfügen, Spalte rechts einfügen und Spalte löschen. Eingefügt und gelöscht wird jeweils dort, wo gerade die markierte Zelle steht.

Die Spaltenbreite einer Tabelle in WordPress ändern

Ein Feld für die Breite einzelner Spalten hat der Tabellen-Block nicht. Das ist die häufigste Frage zu Tabellen in WordPress, und es gibt zwei Wege, je nachdem, wie genau man es braucht.

Weg 1: Die Spalten nach dem Inhalt richten lassen

Der Schalter Zellen mit fester Breite entscheidet, wie der Browser die Spalten aufteilt:

• An (Standard): Alle Spalten sind gleich breit. Eine Spalte mit einer Zahl bekommt genauso viel Platz wie eine Spalte mit einem langen Text.
• Aus: Der Browser verteilt die Breite nach dem Inhalt. Spalten mit viel Text werden breiter, Spalten mit kurzen Einträgen schmaler.

Für die meisten Tabellen ist Aus die bessere Wahl, und zwar vor allem wegen des Smartphones: Mit fester Breite quetscht der Browser bei vier oder mehr Spalten jede Spalte auf ein Viertel des Bildschirms und bricht dabei Wörter mitten im Wort um. Ohne feste Breite bleibt die Tabelle so breit, wie ihr Inhalt es braucht, und lässt sich innerhalb des Blocks seitlich wischen. Beides habe ich hier auf WebsiteBerater.com bei 375 Pixel Bildschirmbreite (ein typisches Smartphone) nachgemessen.

Weg 2: Eine bestimmte Breite mit CSS festlegen

Braucht eine Spalte eine bestimmte Breite, z.B. die erste Spalte 40 Prozent der Tabelle, geht das mit einer Zeile CSS direkt am Block: Tabellen-Block auswählen, in der Seitenleiste den Bereich Erweitert aufklappen und in das Feld Zusätzliches CSS Folgendes eintragen:

& tr > :first-child { width: 40%; }

Das & steht dabei für diesen einen Tabellen-Block, das CSS wirkt also nur hier. Für die zweite Spalte schreibt man :nth-child(2) statt :first-child, für die dritte :nth-child(3), und so weiter. Zwei Dinge sind dabei wichtig, beide habe ich ausprobiert:

• Schreiben Sie pro Zeile nur einen Selektor. Eine Liste mit Komma (z.B. & td:first-child, & th:first-child) setzt WordPress falsch zusammen, und die Regel wirkt dann nicht.
• Verwenden Sie tr > :first-child und nicht nur td:first-child. Hat die Tabelle eine Kopfzeile und ist Zellen mit fester Breite eingeschaltet, richtet sich der Browser nur nach der ersten Zeile, und die besteht aus Kopfzellen (th), nicht aus td.

Das Feld Zusätzliches CSS am Block sehen nur Benutzer, die CSS bearbeiten dürfen, auf einer normalen WordPress-Website also Administratoren. Wer es nicht hat oder dieselbe Regel für mehrere Tabellen braucht, gibt den Tabellen unter Erweitert → Zusätzliche CSS-Klasse(n) eine eigene Klasse, z.B. preistabelle, und schreibt die Regel einmal in das zusätzliche CSS des Themes (Design → Anpassen → Zusätzliches CSS, oder die entsprechende Stelle im Theme):

.preistabelle tr > :first-child { width: 40%; }

Mit eingeschalteter fester Breite ist eine solche Angabe verbindlich. Ohne feste Breite ist sie ein Wunsch, den der Browser auf einem schmalen Bildschirm dem Inhalt unterordnet.

Tabellen im WordPress Classic Editor

Im Classic Editor von WordPress kann man Tabellen entweder direkt als HTML eingeben oder über ein geeignetes Plugin einbauen. Bei der Verwendung eines Plugins platziert man an der Stelle, wo die Tabelle sein soll, einen WordPress-Shortcode.

Der Standard-Editor in WordPress vor Version 5.0 wird inzwischen liebevoll als Classic Editor bezeichnet. Trotz der Einführung des Block-Editors ist der Classic Editor für viele WordPress-Benutzer nach wie vor das Werkzeug der Wahl, ob über das offizielle Plugin Classic Editor oder über eine entsprechende Einstellung im Theme.

Fakt ist jedenfalls, dass der Classic Editor von sich aus keine Tabellen-Funktion hat. Daher muss man sich irgendwie behelfen, um Tabellen im Classic Editor in WordPress zu erzeugen. Dafür gibt es mehrere Möglichkeiten: Direkt als HTML, mit einem Plugin, das dem Classic Editor eine Tabellen-Schaltfläche hinzufügt (z.B. Advanced Editor Tools, früher TinyMCE Advanced), oder mit einem eigenen Tabellen-Plugin.

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-Ansicht 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-Ansicht des Classic Editors fertig geschrieben ist, dann wird sie in der visuellen Ansicht auch richtig erkannt und angezeigt. Man braucht also nur für die Tabelle selbst zu Text zu wechseln und kann direkt danach (und natürlich auch davor) mit dem üblichen visuellen Editor arbeiten.

Ein Tipp für Smartphones: Packen Sie eine selbst geschriebene Tabelle in einen Container, der seitliches Wischen erlaubt, sonst kann eine breite Tabelle die ganze Seite breiter machen als den Bildschirm:

<div style="overflow-x: auto;">
  <table> ... </table>
</div>

Diese Variante lässt sich übrigens auch im Block-Editor umsetzen, wo es nicht nur einen Tabellen-Block, sondern auch den Block Individuelles HTML 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, gibt es eine Lösung, in der das Coden der Tabelle bereits von jemandem übernommen wurde: WordPress-Plugins für Tabellen. Sie lohnen sich vor allem dann, wenn eine Tabelle an mehreren Stellen erscheinen soll, wenn Besucher sie sortieren oder durchsuchen sollen, oder wenn die Daten aus einer Datei oder Datenbank kommen.

Die drei Plugins, die ich mir dafür am ehesten ansehen würde (Stand der Zahlen: wordpress.org, Oktober 2026):

• TablePress: kostenlos, rund 600.000 aktive Installationen, regelmäßig aktualisiert. Tabellen werden zentral verwaltet und per Block oder Shortcode eingebunden; Sortieren, Suchen, Blättern und horizontales Scrollen für Besucher sind eingebaut. Für die meisten Websites die erste Wahl, und das Plugin, das ich unten im Detail zeige.
• wpDataTables: stärker bei großen Datenmengen und Diagrammen. Tabellen und Diagramme lassen sich aus Excel-, CSV- oder JSON-Dateien, Google Tabellen oder direkt aus einer Datenbank erzeugen. Es gibt eine kostenlose Version, die meisten dieser Datenquellen und die Diagramme gibt es aber erst in der kostenpflichtigen. Ich verwende es hier auf WebsiteBerater.com z.B. für die Anbieter-Tabelle im Vergleich der Online-Buchungssysteme.
• Ninja Tables: kostenlos mit Pro-Version, rund 70.000 aktive Installationen, viele fertige Tabellen-Vorlagen und ein Drag-and-drop-Editor.

Werbung (Affiliate-Link): wpDataTables ansehen

Bevor Sie ein Tabellen-Plugin installieren, lohnt sich derselbe kurze Check wie bei jedem Plugin, nämlich 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 beschrieben.

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-Plugin-Verzeichnis erhältlich und weit verbreitet (im Oktober 2026 rund 600.000 aktive Installationen, getestet mit der aktuellen WordPress-Version). Die Bewertungen des Plugins sind überwältigend positiv, und es wird laufend weiterentwickelt. Für Zusatzfunktionen gibt es kostenpflichtige Premium-Versionen, für alles, was ich hier zeige, reicht die kostenlose.

Installation des TablePress WordPress Plugins

Man installiert das Plugin über Plugins → Plugin hinzufügen im linken Seitenmenü des WordPress-Dashboards. Im Suchfeld gibt man tablepress ein, klickt beim Ergebnis „TablePress“ auf Jetzt installieren und nach einigen Sekunden auf Aktivieren. Danach gibt es im linken Seitenmenü einen eigenen Menüpunkt TablePress.

Eine Tabelle in WordPress mit TablePress erstellen

Eine neue Tabelle legt man über TablePress → Neue Tabelle an. Nach Eingabe eines Namens und der Anzahl der Zeilen und Spalten erzeugt man sie durch einen Klick auf Tabelle hinzufügen.

Der Name sollte unter allen Tabellen einer WordPress-Website eindeutig sein, damit man die Tabelle in der Liste aller Tabellen leichter wiederfindet. Unabhängig davon bekommt jede Tabelle automatisch eine eindeutige ID-Nummer, über die sie später eingebunden wird.

Statt eine Tabelle von Hand anzulegen, kann man unter TablePress → Import auch eine vorhandene Tabelle aus einer CSV-, Excel-, HTML- oder JSON-Datei übernehmen.

Die Funktionsweise von TablePress, einfach erklärt

TablePress verwaltet alle Tabellen zentral in einer Liste unter TablePress → Alle Tabellen, mit ID, Name, Autor und Datum der letzten Änderung. Eingebunden wird eine Tabelle über ihre ID, entweder mit dem Block TablePress-Tabelle oder mit einem Shortcode.

Das hat eine praktische Folge: Ändert man eine Tabelle in der Liste, ändert sie sich überall, wo sie eingebunden ist. WordPress holt bei jedem Aufruf der Seite die aktuelle Version der Tabelle aus der Datenbank. Bindet man dieselbe Tabelle auf mehreren Seiten ein, pflegt man sie trotzdem nur an einer Stelle.

Eine Tabelle in TablePress bearbeiten

Eine Tabelle bearbeitet man, indem man sie in der Liste aller Tabellen anklickt oder direkt nach dem Erstellen im Bearbeitungsmodus bleibt. Die Bearbeitungsansicht hat mehrere Bereiche:

• Informationen über die Tabelle: Name, Beschreibung und der Shortcode der Tabelle zum Kopieren.
• Tabellen-Inhalt: die Zellen selbst, ähnlich wie in einer Tabellenkalkulation. Seit TablePress 3.4 gibt es darüber eine mitlaufende Werkzeugleiste mit allen Bearbeitungsfunktionen: Zeilen und Spalten einfügen, löschen, verschieben, ausblenden, sortieren, Zellen verbinden, Rückgängig machen und Wiederherstellen.
• Tabellen-Einstellungen: z.B. wie viele der ersten Zeilen der Tabellenkopf und wie viele der letzten Zeilen der Tabellenfuß sind, Alternierende Zeilenfarben (die Streifen, die ich bei großen Tabellen empfehle), Zeilenhervorhebung beim Überfahren mit der Maus, ob Name und Beschreibung mit angezeigt werden, und zusätzliche CSS-Klassen für diese Tabelle.
• Tabellenfunktionen für Seitenbesucher: Sortieren, Filtern/Suche, Blättern und Horizontales Scrollen. Diese Funktionen laufen per JavaScript live im Browser, ohne Neuladen der Seite. Ich habe das z.B. für Ergebnis-Tabellen von Sportereignissen genutzt: Teilnehmer finden sich über die Suche und sortieren nach Rundenzeiten.

Wichtig: Alle Änderungen erst mit Änderungen speichern sichern. Mit Vorschau sieht man die Tabelle vorher so, wie sie auf der Website erscheinen wird. In der Liste aller Tabellen kann man Tabellen außerdem kopieren, exportieren (als CSV-, HTML- oder JSON-Datei) und löschen.

Eine TablePress-Tabelle in WordPress verwenden und platzieren

Im Block-Editor fügt man den Block TablePress-Tabelle ein und wählt die gewünschte Tabelle aus der Liste aus. Im Classic Editor gibt es dafür eine eigene Schaltfläche TablePress-Tabelle einfügen in der Werkzeugleiste, die den passenden Shortcode an der Stelle des Cursors einfügt.

Alternativ kopiert man den Shortcode der Tabelle direkt an die gewünschte Stelle, z.B. in einen Absatz, einen Shortcode-Block oder ein Widget. Für die Tabelle mit der ID 1 lautet er:

[table id=1 /]

Wo man diesen Shortcode hineinkopiert, dort wird die Tabelle angezeigt. Den Shortcode jeder Tabelle findet man auch in ihrer Bearbeitungsansicht ganz oben unter Informationen über die Tabelle. Was Shortcodes genau sind, erkläre ich in meinem Artikel Shortcodes in WordPress, einfach erklärt.

Die Spaltenbreite in TablePress ändern

Auch TablePress hat kein Feld für die Spaltenbreite. Der Weg führt hier ebenfalls über CSS, und zwar über TablePress → Einstellungen → Zusatz-CSS. TablePress gibt jeder Tabelle eine Klasse mit ihrer ID und jeder Spalte eine Klasse mit ihrer Nummer. Für die zweite Spalte der Tabelle mit der ID 1:

.tablepress-id-1 .column-2 { width: 150px; }

Oft ist die Tabelle aber gar nicht wegen der Spaltenbreiten zu breit, sondern wegen des Innenabstands der Zellen. Dann hilft laut TablePress-Dokumentation schon, diesen zu verkleinern: .tablepress-id-1 { –padding: 4px; }.

Tabellen in WordPress und responsive Webdesign

Responsive Webdesign ist in der heutigen Zeit ein wichtiges Thema. Weltweit kommen inzwischen rund 59 Prozent aller Website-Zugriffe von Smartphones, in Deutschland ähnlich viele, in Österreich rund 44 Prozent (StatCounter, September 2026). Diese Zahlen variieren allerdings von Website zu Website und von Thema zu Thema.

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

Hier auf WebsiteBerater.com z.B. kommen weniger als 20 Prozent der Besuche aus der Google-Suche von Mobilgeräten. Auf anderen Seiten, die ich betreue, sehe ich dagegen mobile Anteile von 60 Prozent 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

Verlässlich beantwortet diese Frage für die eigene Website nur die eigene Statistik: In Google Analytics, Matomo und den meisten anderen Statistik-Werkzeugen gibt es einen Bericht nach Gerätekategorie (Desktop, Mobil, Tablet). Für die Besucher aus der Google-Suche zeigt die Google Search Console dasselbe unter Leistung, aufgeschlüsselt nach Geräten. Falls Sie noch keine Statistik auf Ihrer Website nutzen, lassen Sie sich wertvolle Daten über das Besucherverhalten entgehen.
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ören 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?

Es gibt im Wesentlichen drei Dinge, die mit einer zu breiten Tabelle auf dem Smartphone passieren können, und alle drei habe ich hier auf WebsiteBerater.com bei 375 Pixel Bildschirmbreite nachgemessen:

• Die Spalten werden gequetscht. Das passiert mit dem Tabellen-Block, solange Zellen mit fester Breite eingeschaltet ist: Vier Spalten bekommen je ein Viertel der Breite, und Wörter wie „Speicherplatz“ werden mitten im Wort umgebrochen.
• Die Tabelle lässt sich innerhalb ihres Kastens seitlich wischen. Das ist das gewünschte Verhalten. Der Tabellen-Block macht das von sich aus, sobald Zellen mit fester Breite ausgeschaltet ist. TablePress macht es, wenn unter Tabellenfunktionen für Seitenbesucher die Option Horizontales Scrollen aktiviert ist.
• Die Tabelle macht die ganze Seite breiter als den Bildschirm. Das passiert z.B. mit einer TablePress-Tabelle ohne horizontales Scrollen oder einer selbst geschriebenen HTML-Tabelle ohne den oben gezeigten Container. Dann wackelt beim Lesen die ganze Seite seitlich, oder das Theme schneidet den überstehenden Teil einfach ab.

Wie das in der Praxis aussieht, zeigt eine Ergebnistabelle eines Sportereignisses, die ich vor einigen Jahren mit TablePress auf einer anderen Website erstellt habe. Die Website hat ein sogenanntes Boxed Layout, d.h. einen Bereich mit fixer Breite für den Inhalt, und der Beitrag hat noch eine Seitenleiste. Schon auf dem Desktop wird es eng:

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

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

Die Tabelle bleibt lesbar, weil die Schrift so groß bleibt wie im Text, die Spalten nach ihrem Inhalt bemessen sind und nichts verstümmelt wird. Dafür ist sie breiter als der Bildschirm und muss seitlich gescrollt werden, sodass man nicht alle Spalten gleichzeitig sieht. Durch Herauszoomen kann man sie auch in ihrer Gesamtheit sehen, allerdings mit entsprechend kleinerer Schrift:

Fazit: So bleiben Tabellen in WordPress auf dem Smartphone lesbar

Eine breite Tabelle soll auf dem Smartphone nicht schrumpfen, sondern sich innerhalb ihres Kastens seitlich wischen lassen. Im Block-Editor heißt das: Zellen mit fester Breite ausschalten. In TablePress: Horizontales Scrollen einschalten. Bei einer selbst geschriebenen HTML-Tabelle: der Container mit overflow-x: auto. Und dann die Seite einmal auf dem eigenen Smartphone ansehen, bevor man sie veröffentlicht. Bei sehr breiten Tabellen lohnt sich außerdem die Frage, ob alle Spalten wirklich nötig sind.

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. Und der Inhalt eines Bildes ist für Suchmaschinen und Screenreader nur so weit lesbar, wie man ihn im Alternativtext beschreibt.

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.

Ihr Feedback zu diesem Artikel

Über Feedback zu diesem Artikel freue ich mich. Lassen Sie unten einen Kommentar für mich da, ob Lob, Kritik oder eine Frage, die ich hier nicht beantwortet habe, ich bin immer für Hinweise und Anregungen dankbar, die diesen Artikel verbessern. Bitte beachten Sie: Um Spam zu vermeiden, lese ich jeden Kommentar persönlich und gebe ihn dann erst frei. Seien Sie also nicht überrascht, wenn es ein Bisschen dauert, bis er zu sehen ist. Danke für Ihr Verständnis!

Weitere Informationen zu WordPress-Websites

Da Sie offenbar gerade an einer WordPress-Website arbeiten, sollten Sie auf jeden Fall die Übersicht meiner kompletten Anleitung zum Erstellen einer WordPress-Website durchsehen. Haben Sie schon an alle Schritte gedacht?