Tabellen in WordPress sind auf den ersten Blick einfach. Solange Sie nur ein oder zwei statische Raster für die gesamte Website benötigen, genügt manuelles HTML. Sobald Sie jedoch regelmäßige Datenaktualisierungen, Importe aus Excel oder Google Sheets oder Spaltensortierung benötigen, werden die Bordmittel zu einer endlosen Code-Frickelei.

Schlimmer noch: Ihre Website ist responsiv, HTML-Tabellen sind es jedoch nicht. Auf mobilen Bildschirmen zerfallen sie, erfordern horizontales Scrollen und zerstören das gesamte Layout. Interaktivität (Filter, Suche, Frontend-Bearbeitung) mit den Standardmitteln von WordPress hinzuzufügen, ist ohne einen Entwickler praktisch unmöglich.

wpDataTables ist ein Plugin, das all diese Probleme mit einer einzigen Installation löst. Kein Code, vollständige Responsivität ab Werk, Dutzende Datenquellen und Visualisierung durch Diagramme. Es wird von mehr als 80.000 Unternehmen genutzt, und die kostenlose Lite-Version wurde über 60.000 Mal auf WordPress.org installiert. Sehen wir uns an, was es kann und wie Sie damit arbeiten.

💡 Kurzüberblick:

• Installieren Sie wpDataTables von CodeCanyon und aktivieren Sie es auf Ihrer Website.
• Erstellen Sie eine Tabelle aus CSV, Excel, Google Sheets, MySQL, JSON, XML oder manuell, jede Quelle funktioniert.
• Konfigurieren Sie das Erscheinungsbild: Farben, Schriftarten, Ausrichtung, responsives Verhalten auf Mobilgeräten.
• Fügen Sie den fertigen Shortcode in einen Beitrag oder eine Seite ein, die Tabelle erscheint sofort mit Filterung, Sortierung und Suche.
• Erstellen Sie bei Bedarf ein Diagramm auf Basis derselben Tabelle und fügen Sie es auf die gleiche Weise hinzu.

Was an HTML-Tabellen in WordPress problematisch ist

Der Standardweg, Tabellen einzufügen, sind HTML-Tags im Texteditor-Tab. Die Grundstruktur sieht so aus:

1
<table style="width: 100%;">
2
<tbody>
3
<tr>
4
<th style="width: 33%;">First</th>
5
<th style="width: 34%;">Second</th>
6
<th style="width: 33%;">Third</th>
7
</tr>
8
<tr>
9
<td>Jack</td>
10
<td>Jackson</td>
11
<td>25</td>
12
</tr>
13
<tr>
14
<td>Jane</td>
15
<td>Jenson</td>
16
<td>30</td>
17
</tr>
18
</tbody>
19
</table>

Das Ergebnis ist eine einfache dreispaltige Tabelle. Sieht ordentlich aus, wenn Sie eine auf Ihrer Website haben und nicht vorhaben, sie zu aktualisieren.

Doch der Ansatz hat drei grundlegende Probleme. Erstens: HTML-Tabellen sind statisch. Die Daten sind fest codiert, und jede Änderung bedeutet erneutes Editieren des Codes. Zweitens: Responsivität. Das Theme kann fluid sein, aber <table> ist es nicht. Auf einem Smartphone sehen Nutzer abgeschnittene Spalten oder horizontales Scrollen. Drittens: keine Filter, keine Sortierung, keine Suche, nur ein totes Raster.

Ihre Website ist responsiv. Ihre Tabellen sind es nicht.

Auch der manuelle Datenimport aus Excel oder Google Sheets hilft nicht weiter: Kopieren und Einfügen aus Tabellenkalkulationen in WordPress verwandelt die Formatierung in Chaos. Wenn Sie viele Tabellen haben und diese häufig aktualisiert werden, verbringen Sie Zeit mit Layout-Kämpfen, anstatt an Inhalten zu arbeiten.

Tabellen ohne Code erstellen mit wpDataTables

wpDataTables ist ein Premium-Plugin, das WordPress zu einer vollwertigen Engine für die Arbeit mit Tabellen und Diagrammen macht. Keine einzige Zeile Code. Installieren Sie es, wählen Sie eine Datenquelle, konfigurieren Sie das Erscheinungsbild, und die Tabelle ist bereit zum Einfügen per Shortcode.

Das Plugin wird über CodeCanyon nach dem Modell „Einmal kaufen, dauerhaft nutzen" vertrieben. Die Preise beginnen bei 49 $ pro Jahr für eine Einzel-Domain-Lizenz (Starter-Plan). Es gibt drei höhere Pläne: Standard, Pro und Developer, die sich in der Anzahl der Domains und erweiterten Funktionen wie der Anbindung mehrerer Datenbanken und WooCommerce-Integration unterscheiden. Die kostenlose Lite-Version ist im WordPress.org-Verzeichnis mit grundlegender Funktionalität verfügbar.

🔗 Mehr über wpDataTables | 🔗 Live-Demo

Die Entwickler haben sich auf drei Dinge konzentriert: Quellenflexibilität, tiefgehende Anpassung und die Arbeit mit Live-Daten. Gehen wir die Kernfunktionen durch.

Mehrere Datenquellen

Das Plugin bezieht Daten von überall her. Excel, CSV, Google Sheets, XML, JSON, serialisierte PHP-Arrays und direkte MySQL-Abfragen stehen bei der Tabellenerstellung alle zur Verfügung. Sie können eine Tabelle auch von Grund auf manuell über den Backend-Editor befüllen. Oder Sie verbinden eine Echtzeitquelle, sodass sich die Tabelle bei jedem Seitenaufruf dynamisch aktualisiert.

MySQL verdient besondere Erwähnung. Sie schreiben eine Abfrage, das Plugin gibt das Ergebnis als sortierbare Tabelle mit Suche aus. Separate Verbindungen zu MS SQL und PostgreSQL werden unterstützt, wobei jede Tabelle ihre Daten von einem eigenen Server beziehen kann. Für Projekte mit verteilter Architektur löst dies das Problem der Datenkonsolidierung ohne zwischengeschaltetes ETL.

Erweiterte Anpassung und responsives Layout

Das Tabellendesign stellen Sie über Kontrollkästchen und Farbwähler zusammen, CSS ist nicht erforderlich. Zu den Einstellungen gehören Typografie, Ausrichtung, Datums- und Uhrzeitformate sowie die Oberflächensprache. Es gibt vorgefertigte Tabellen-Skins: Purple, Dark, Blue. Für komplexe Fälle stehen Felder für benutzerdefiniertes JS und CSS bereit.

Die Responsivität ist konsequent umgesetzt. Das Plugin quetscht die Tabelle nicht einfach auf die Bildschirmbreite, Sie entscheiden, wie sie sich auf Mobilgeräten verhält. Sie können flexible Spaltenausblendung aktivieren, horizontales Scrollen hinzufügen oder die maximale Breite begrenzen. Die Tabelle bleibt auf jedem Gerät lesbar.

Filter für effiziente Suche

Wenn Sie bei der Tabellenerstellung Filter aktivieren, erhalten Nutzer die Möglichkeit, die Auswahl sofort nach einer beliebigen Spalte einzugrenzen. Bei großen Datenbeständen verändert das die Nutzungserfahrung grundlegend: Statt über drei Bildschirmseiten zu scrollen, gibt eine Person einen Parameter ein und sieht nur die relevanten Zeilen.

Die Filter arbeiten serverseitig. Jede Nutzeraktion erhöht die Rechenlast auf der Datenbank, daher erlaubt Ihnen das Plugin, die Filterung dort zu deaktivieren, wo sie überflüssig ist. Die Balance zwischen Geschwindigkeit und Komfort konfigurieren Sie pro Tabelle.

Frontend-MySQL-Bearbeitung

Eine einzigartige Funktion: Indem Sie eine Option auf dem Tab „Bearbeitung" aktivieren, erlauben Sie Nutzern, Daten direkt vom Website-Frontend aus zu editieren. Das ist nicht nur kosmetisch, die Änderungen werden in die Datenbank geschrieben. Der Zugriff wird über Rollen gesteuert: alle Besucher, nur registrierte Nutzer oder bestimmte Gruppen.

Die Einsatzszenarien sind vielfältig: Kunden aktualisieren ihre Einträge in einer CRM-Tabelle, Mitarbeiter kennzeichnen Aufgabenstatus, Abonnenten ergänzen ein gemeinsames Register. Kein separates Admin-Panel, keine Einarbeitung der Nutzer in WordPress.

Visualisierung durch Diagramme

Menschen erfassen Visualisierungen um Größenordnungen schneller als tabellarische Zahlen. wpDataTables erstellt dynamische Diagramme auf Basis von Google Charts, HighCharts oder Chart.js, Sie geben einfach die Quelltabelle an und ordnen die Spalten den Diagrammachsen zu.

Es stehen mehr als ein Dutzend Diagrammtypen zur Verfügung: Linie, Kreis, Säule, Histogramm, Punktdiagramm. Nach der Konfiguration erhält das Diagramm einen eigenen Shortcode und wird unabhängig von der Tabelle in einen Beitrag eingefügt. Werden die Quelldaten aktualisiert, zeichnet sich das Diagramm automatisch neu. Ideal für Blogger mit monatlichen Einkommensberichten und für Unternehmens-Dashboards.

So erstellen Sie eine responsive Tabelle: Schritt-für-Schritt-Anleitung

Die Theorie ist klar, gehen wir zur Praxis über. Drei Schritte trennen Sie von einer funktionierenden Tabelle auf Ihrer Website.

Schritt 1: wpDataTables installieren

Das Plugin wird auf CodeCanyon erworben. Nach der Bezahlung gehen Sie in den Bereich Downloads Ihres Kontos, suchen wpDataTables und laden die Datei mit der Bezeichnung „Installable WordPress file only" herunter. Im WordPress-Adminbereich navigieren Sie zu Plugins → Installieren → Plugin hochladen, wählen die heruntergeladene ZIP-Datei aus und aktivieren sie.

Für automatische Updates müssen Sie den Item Purchase Code von CodeCanyon hinterlegen. Sie benötigen ihn auch für den Zugang zum Premium-Support im ersten Jahr nach dem Kauf.

Schritt 2: Eine Tabelle erstellen

Im Seitenleistenmenü von WordPress erscheint ein neuer Eintrag namens wpDataTables. Klicken Sie darauf und dann auf den blauen Button Hinzufügen. Das Plugin bietet Ihnen die Wahl der Erstellungsmethode an: Import aus CSV/Excel, Verbindung zu Google Sheets, manuelle Erstellung, SQL-Abfrage oder Verknüpfung mit einer externen API.

Nehmen wir zur Demonstration CSV. Laden Sie die Datei hoch, das Plugin erkennt die Trennzeichen automatisch und zeigt eine Vorschau. Im nächsten Bildschirm vergeben Sie den Tabellennamen und bearbeiten bei Bedarf die Spalten: umbenennen, überflüssige löschen, neue hinzufügen.

Der letzte Bildschirm dient der Feinabstimmung. Hier aktivieren Sie Tabellenwerkzeuge (Drucken, Kopieren, Export nach PDF/Excel), Filterung und Frontend-Bearbeitung. Alle Änderungen werden in der Live-Vorschau rechts angezeigt. Klicken Sie auf Speichern, ist die Tabelle fertig.

Schritt 3: Den Shortcode in einen Beitrag oder eine Seite einfügen

Nach dem Speichern stellt Ihnen das Plugin einen Shortcode wie [wpdatatable id=X] bereit. Kopieren Sie ihn und fügen Sie ihn in einen beliebigen WordPress-Beitrag oder eine Seite ein, das ist alles. Die Tabelle erscheint auf der Website mit allen aktivierten Funktionen: Sortierung, Suche, Filter.

Das Ergebnis sehen Sie im Screenshot oben: Die Filterung ist aktiv, die Suche funktioniert, Spalten sortieren per Klick. Keine Codezeile über einen kurzen Shortcode hinaus. Sie würden eine Stunde damit verbringen, dieselbe Tabelle mit HTML zu erstellen, und das immer noch ohne Interaktivität.

Wie Sie ein Diagramm auf Basis einer Tabelle erstellen

Wenn die Tabelle fertig ist, öffnen Sie sie in der Liste und klicken auf Diagramm erstellen. Wählen Sie einen Visualisierungstyp: Säulen, Kreis, Linie, Punkt und insgesamt mehr als ein Dutzend verfügbarer Varianten.

Im nächsten Schritt geben Sie die Quelltabelle an und ordnen Spalten den Achsen zu. Für ein Säulendiagramm benötigen Sie mindestens zwei Spalten: Kategorien und Werte. Numerische Spalten lassen sich mit einem Bereichsschieberegler filtern, was nützlich ist, wenn die Tabelle Hunderte Zeilen hat, Sie aber nur einen Teil davon im Diagramm darstellen möchten.

Der dritte Bildschirm betrifft die visuellen Einstellungen. Breite, Höhe, Hintergrund, Rahmen, Schriftarten, Reihenfarben, Beschriftungen, Tooltips beim Darüberfahren. Konfiguriert, speichern, den Diagramm-Shortcode kopieren und neben der Tabelle oder separat in den Inhalt einfügen.

Diagramme sind dynamisch mit der Tabelle verknüpft. Ändern sich die Quelldaten, baut sich das Diagramm selbst neu auf. Kein Export nach Excel, kein manuelles Aktualisieren von Screenshots oder andere Routine.

Erweiterungen für zusätzliche Funktionen

Die Basisfunktionalität genügt für die meisten Aufgaben. Wenn Sie jedoch Spezifisches benötigen, deckt das Ökosystem der Addons Nischenszenarien ab.

Leistungsstarke Filter. Kaskadierende Filterung (von links nach rechts: gewählte Kategorie, Subkategoriefilter aktualisiert sich), facettierte Suche, Ausblenden der Tabelle bis zur Parameterauswahl und Live-Suche während der Eingabe. Aktivierbar mit einer Checkbox in den Einstellungen.

Der Berichtsgenerator erstellt Word- oder Excel-Dokumente direkt aus tabellarischen Daten. Szenario: Mitarbeiter haben die Tabelle über das Frontend befüllt, Sie klicken auf eine Schaltfläche, fertiger Monatsbericht zum Ausdrucken. Nützlich für Stundenzettel, Rechnungen und regelmäßige Auswertungen.

Formidable Forms. Formulare erfassen Daten von Nutzern, das Plugin macht aus jeder Einreichung automatisch eine Tabellenzeile. Formularfeld wird Tabellenspalte. Kein Zwischenexport.

Gravity Forms. Dieselbe Mechanik, jedoch für den meistgenutzten WordPress-Formular-Builder. Nach der Integration steht Gravity Forms als zusätzliche Datenquelle beim Anlegen einer Tabelle zur Verfügung. Frontend-Bearbeitung von über Formulare erstellten Datensätzen wird unterstützt.

Lizenzmodell und Preise

wpDataTables hat eine übersichtliche Preisstaffelung mit vier Stufen:

Alle Pläne enthalten ein Jahr Premium-Support und monatliche Updates. Die Lizenz ist lebenslang gültig: Wenn Sie nicht verlängern, funktioniert das Plugin weiter, Sie verlieren jedoch den Zugang zu Updates und Support. Es gilt eine 15-tägige Geld-zurück-Garantie.

Der beste Weg, das Plugin vor dem Kauf zu evaluieren, ist die Live-Sandbox auf der wpDataTables-Website. Sie erhalten vollen Zugriff auf das Backend: Legen Sie Tabellen an, erstellen Sie Diagramme, experimentieren Sie mit den Einstellungen. Keine Video-Demos und Screenshots, sondern eine echte Probefahrt im Browser.

Für einen schnellen Einstieg gibt es eine kostenlose Lite-Version auf WordPress.org (über 60.000 aktive Installationen). Der Funktionsumfang ist eingeschränkt, reicht aber aus, um zu beurteilen, ob das Plugin zu Ihrer Aufgabenstellung passt.

⁉️🤔 Häufig gestellte Fragen

Muss ich programmieren können, um mit wpDataTables zu arbeiten?

Nein, alle Tabellen und Diagramme werden über eine visuelle Oberfläche erstellt, ein Assistent führt Sie von der Quellenauswahl bis zum Einfügen des Shortcodes. Felder für eigenes JS und CSS sind vorhanden, aber optional. Entwickler schätzen die Möglichkeit, eigene SQL-Abfragen zu schreiben, externe Datenbanken anzubinden und REST API zu nutzen, um Daten von Drittanbietern abzurufen.

Was passiert mit den Tabellen nach der Deinstallation des Plugins?

Standardmäßig bleiben die Tabellen in der Datenbank erhalten, auch wenn Sie wpDataTables deaktivieren oder löschen. Bei einer Neuinstallation werden sie wiederhergestellt. Dies ist konfigurierbar: In den Optionen können Sie die vollständige Datenlöschung zusammen mit dem Plugin wählen. Tabellen sind nicht dauerhaft an das Plugin gebunden, Sie können Daten jederzeit nach CSV exportieren und in ein anderes Tool überführen.

Wie unterscheidet sich die kostenpflichtige Version von Lite?

Die Lite-Version erlaubt das Erstellen von Tabellen aus CSV, Excel, Google Sheets, JSON und XML sowie manuell. Einfache Sortierung und Suche sind verfügbar. Es fehlen jedoch: MySQL-Abfragen, Anbindung mehrerer Datenbanken, Diagramme, Frontend-Bearbeitung, Filterung, WooCommerce-Integration und alle Add-ons. Wenn Sie Daten aus externen Quellen verwalten und Diagramme erstellen möchten, benötigen Sie die kostenpflichtige Version. Für statische Tabellen dürfte Lite ausreichen.

Unterstützt das Plugin WooCommerce?

Ja, ab dem Standard-Plan. Sie können dynamische Produkttabellen erstellen, die sich automatisch aktualisieren, wenn sich der WooCommerce-Katalog ändert. Kunden erhalten eine sortierbare, filterbare Produktliste mit aktuellen Preisen und Beständen. Für Shops mit großem Sortiment ersetzt dies ein separates Katalog-Plugin.

Wie viele Tabellen kann ich erstellen?

So viele, wie Sie benötigen. Kein Plan begrenzt die Anzahl der Tabellen und Diagramme. Die einzige Lizenzeinschränkung ist die Anzahl der Domains, auf denen das Plugin aktiviert wird.

Was Sie für Ihre Aufgabe wählen sollten

wpDataTables deckt das gesamte Spektrum der Tabellenarbeit in WordPress ab, von der einfachen CSV-Ausgabe bis hin zu verteilten Datenbankabfragen mit Diagrammvisualisierung. Und das ohne Code zu erfordern, was im WordPress-Ökosystem selten ist.

Die Mechanik ist einfach: Quelle wählen, Design konfigurieren, Shortcode einfügen. Danach führt die Tabelle ein Eigenleben: aktualisiert sich bei Quelländerungen, filtert auf Nutzerklick, sortiert nach jeder beliebigen Spalte und bleibt auf Mobilgeräten lesbar. Keine Zeile HTML, kein separates mobiles Layout.

Das Plugin ist kostenpflichtig, bietet jedoch eine kostenlose Testmöglichkeit in der Sandbox-Umgebung sowie eine Lite-Version für grundlegende Szenarien. Der Einstiegsplan für 49 $ pro Jahr entspricht in etwa ein bis zwei Stunden Entwicklerarbeit und stellt Ihnen ein Werkzeug für das kommende Jahr zur Verfügung.

🔗 Lite-Version von WordPress.org herunterladen