Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 25. November 2016

Aktualisiert am: 08. März 2017

Ein Setzkasten mit Figuren drin.

Tabellen in WordPress komfortabel nutzen

Tabellen gelten im Web als veraltet und störend. Das stimmt aber nur, wenn man Tabellen als Layout- und Gestaltungsmittel einsetzt. Wenn Du jedoch Informationen strukturiert und übersichtlich darstellen willst, sind Tabellen die erste Wahl. Du kannst Tabellen perfekt nutzen, um beispielsweise die Zutatenliste eines Kochrezepts oder eine übersichtliche Preisliste zu präsentieren.

Allerdings bietet WordPress von Haus aus keinerlei Tabellenfunktionen. Zusätzlich erfordern Tabellen ein wenig Aufmerksamkeit, was die Darstellung auf Smartphones angeht – Stichwort „responsiv“.
Ebenfalls ein Problem: Tabellen sind nicht immer barrierefrei. Aber für all diese Aspekte gibt es brauchbare Lösungen.

Einfach und doch mächtig: das Plugin „Easy Table”

Hinweis am 8. März 2017, Philipp Wolf: Das WordPress-Verzeichnis stellt das Plugin „Easy Table“ aktuell nicht zur Verfügung.

Wenn Du nur gelegentlich Tabellen einsetzt und keine komplizierte Tabellen-Struktur benötigst, eignet sich das Plugin Easy Tables sehr gut.

Das Plugin arbeitet mit einem Shortcode (siehe „Shortcodes: So lässt Du WordPress für Dich arbeiten“), mit dem Du Tabellen direkt in Dein Posting einfügen kannst. Das Schema ist recht intuitiv:

­

Den Inhalt der Spalten trennst Du per Kommata, eine Zeile ergibt automatisch auch eine Zeile in der Tabelle. Du musst also lediglich darauf achten, dass jede Deiner Zeilen gleich viele Elemente enthält, die durch Kommata getrennt sind.

Bei Easy Table erstellst Du Tabellen direkt im WordPress-Beitrag.

Bei Easy Table erstellst Du Tabellen direkt im WordPress-Beitrag.

Das Charmante an Easy Table ist, dass es sowohl für Blogger ohne HTML-Kenntnisse geeignet ist, als auch für solche, die sich gut auskennen und ihre Tabelle flexibler gestalten möchten. Denn zahlreiche Optionen und Parameter für den Shortcode machen Easy Table sehr vielseitig. Der Shortcode wird allerdings ein wenig unübersichtlich, wenn Du mehrere dieser weiterführenden Optionen nutzt.

So sieht das Ergebnis im Browser aus.

So sieht das Ergebnis im Browser aus.

Was hier alles möglich ist, beschreibt das Plugin selbst sehr ausführlich auf der Einstellungs-Seite in WordPress – allerdings auf Englisch. Hier nur ein Beispiel, um einen Eindruck für die Funktionsweise davon zu vermitteln:

In diesem Beispiel definieren wir:

Insgesamt bietet Easy Table 18 solcher Parameter sowie weitere Optionen für individuelle Lösungen an. Für Tabellen-Grundfunktionen kannst Du all diese Möglichkeiten aber auch komplett ignorieren.

Alle Einstellungen und Optionen erklärt Easy Press direkt in WordPress.

Alle Einstellungen und Optionen erklärt Easy Press direkt in WordPress.

Tabellen unabhängig von Beiträgen verwalten: das Plugin „Tablepress“

Einen anderen Ansatz verfolgt das sehr umfangreiche Plugin Tablepress, das auch auf Deutsch verfügbar ist. Hier verwaltest Du Tabellen nicht direkt im Beitrag. Stattdessen erstellst Du die Tabellen recht komfortabel in einem eigenen Editor innerhalb von WordPress und bindest die fertige Tabelle dann nur noch per Shortcode in den Beitrag ein. Den zugehörigen Shortcode zeigt Tablepress gleich direkt an.

Tablepress hat einen eigenen Editor für Tabellen.

Tablepress hat einen eigenen Editor für Tabellen.

Das hat einige Vorteile: Der Tabellen-Editor ist sehr einfach zu bedienen und Du definierst hier auch die Einstellungen für die jeweilige Tabelle. Auf diese Weise kannst Du eine Tabelle sogar in mehrere verschiedene Beiträge einbauen. Bei späteren Veränderungen bearbeitest Du nur einmal die zentrale Tabelle.

Mit Tablepress integrierst Du Tabellen einmal per Shortcode in den Beitrag und kannst sie später bequem bearbeiten, ohne den Beitrag verändern zu müssen.

Mit Tablepress integrierst Du Tabellen einmal per Shortcode in den Beitrag und kannst sie später bequem bearbeiten, ohne den Beitrag verändern zu müssen.

Dein Leser sieht eine ganz normale Tabelle und bekommt von der zentralen Verwaltung der Tabellen im Hintergrund nichts mit.

Dein Leser sieht eine ganz normale Tabelle und bekommt von der zentralen Verwaltung der Tabellen im Hintergrund nichts mit.

Tablepress bietet zahlreiche Extensions, also quasi Plugins zum Plugin. Einige davon sind kostenlos, für besonders aufwändige Extensions verlangt der Programmierer einen kleinen Obolus. Mit diesen Erweiterungen lassen sich ganz außergewöhnliche Dinge realisieren. Sie machen Tablepress zu einem sehr mächtigen Tool, wenn Du viel mit Tabellen arbeitest.

Beispielsweise kannst Du mit einem entsprechenden Shortcode eine bestimmte Zelle oder Reihe einer Tabelle extrahieren und nur diese in einem Beitrag einbinden. So kannst Du Daten fast wie in einer Datenbank als Tabelle verwalten und musst bei Änderungen nicht ständig die einzelnen Beiträge bearbeiten.

Ebenfalls sehr interessant: Tablepress hat eine Exportfunktion. Einmal in WordPress angelegte und gepflegte Tabellen kannst Du Dir also auch herunterladen und beispielsweise in Excel importieren.

Für die responsive Darstellung von Tabellen beispielsweise auf Smartphones gibt es bei Tablepress ebenfalls eine – allerdings kostenpflichtige – Extension (9 Dollar). Damit kannst Du verschiedene Varianten der responsiven Tabellendarstellung verwenden, die je nach Tabellenart durchaus brauchbar und vor allem für umfangreichere Tabellen nützlich sind.

Eine von drei Varianten für responsives Tabellen-Design bei Tablepress.

Eine von drei Varianten für responsives Tabellen-Design bei Tablepress.

Fit für Smartphone und Tablet: Tabellen responsiv machen

Bei großen Tabellen auf kleinen Smartphone-Displays sind Darstellungsprobleme vorhersehbar und nicht vollständig lösbar. Dennoch solltest Du darauf achten, dass Deine Tabellen am Handy zumindest notdürftig lesbar bleiben – dem Leser zu liebe, aber auch aus SEO-Gründen. Denn Google legt immer mehr Wert darauf, dass Websites auch am Handy gut aussehen und gibt solchen Seiten bei den Suchergebnissen tendenziell den Vorzug. Das Stichwort dazu lautet „responsiv“: Dein Blog sollte flexibel darauf reagieren, mit welchem Gerät beziehungsweise mit welcher Bildschirmauflösung ein Leser gerade unterwegs ist.

Das Plugin Magic Liquidizer Responsive Table macht jede Tabelle automatisch responsiv.

Das Plugin Magic Liquidizer Responsive Table macht jede Tabelle automatisch responsiv.

Mit sehr wenig Aufwand verwandelst Du alle Deine Tabellen mit dem Plugin Magic Liquidizer Responsive Table automatisch in responsive Tabellen. Der Trick dabei ist ganz einfach: Unterschreitet die Bildschirmbreite eine bestimmte Grenze, löst das Plugin die Tabellen auf und zeigt die Daten untereinander statt tabellarisch nebeneinander an.

Am Smartphone-Display übersichtlich mit Plugin (links) oder nahezu unleserlich ohne Plugin (rechts).

Am Smartphone-Display übersichtlich mit Plugin (links) oder nahezu unleserlich ohne Plugin (rechts).

Dieses Plugin funktioniert übrigens auch in Kombination mit Easy Table oder Tablepress, auch wenn ein Teil der optischen Formatierungen verloren gehen. Das ist in der Regel nicht sonderlich tragisch. Wer sich mit CSS-Formatierungen auskennt, kann selbst das recht leicht ausbügeln.

Die Vorgehensweise des Plugins zeigt allerdings auch deutlich die Grenzen auf. Denn bei umfangreichen Tabellen wird der Leser bei dieser Darstellung schnell den Überblick verlieren. Deshalb solltest Du unabhängig vom eingesetzten Plugin Deine Tabellen immer direkt am Smartphone prüfen und gegebenenfalls vereinfachen. Schwierig wird es meist bei Tabellen mit mehr als drei Spalten oder wenn die Tabellen-Zellen viel Text oder gar Bilder beinhalten.

Barrierefreie Tabellen

Problematisch sind Tabellen für Sehbehinderte, die sich Websites von einer speziellen Software vorlesen lassen. Nur korrekt barrierefrei formatierte Tabellen kann diese Software richtig interpretieren. Im Detail würde dieses komplexe Thema an dieser Stelle zu weit führen, die folgenden Hinweise bringen aber schon sehr viel.

Ob der Head-Bereich der Tabelle wie in diesem Beispiel optisch hervorgehoben ist, spielt keine Rolle. Entscheidend für „barrierefei“ ist die korrekte Auszeichnung in HTML.

Ob der Head-Bereich der Tabelle wie in diesem Beispiel optisch hervorgehoben ist, spielt keine Rolle. Entscheidend für „barrierefei“ ist die korrekte Auszeichnung in HTML.

Damit die Screenreader-Software erkennen kann, welche Tabellenzellen Überschriften und welche Daten beinhalten, solltest Du das im HTML-Code entsprechend kennzeichnen. Eine korrekt formatierte Tabelle hat deshalb immer einen Header-Bereich – in HTML mit thead ausgezeichnet. Easy Tables definiert die oberste Zeile standardmäßig als Header, bei Tablepress musst Du diese Option aktivieren. Beide Plugins sind aber nicht in der Lage, einen zweiten Head-Bereich (typischerweise die erste Spalte) zu definieren. Hier hilft im Zweifel nur, lediglich Tabellen dem Head-Bereich in der ersten Zeile einzusetzen und auf eine beschreibende erste Spalte zu verzichten.

Wem Barrierefreiheit bei Tabellen wichtig ist, sollte sich mit diesem Thema noch eingehender befassen. Denn mit ein wenig Aufwand sind auch umfangreichere Tabellen durchaus barrierefrei umsetzbar. Eine gute Einführung dazu gibt es auf der Website Barrierefreies Webdesign.

Weitere Möglichkeiten für Tabellen mit WordPress

Speziell für Produktvergleichstabellen gemacht ist das Plugin Table Maker. Trotz der speziellen Ausrichtung lässt es sich auch für andere Tabellen einsetzen und ist in der Bedienung recht komfortabel. Table Maker arbeitet wie Tablepress mit separat verwalteten Tabellen. Interessant ist hier eine Importfunktion, über die Du externe Tabellen im CSV-Format einlesen kannst.

Für die Präsentation von Produkt-Vergleichen optimiert: Table Maker.

Für die Präsentation von Produkt-Vergleichen optimiert: Table Maker.

Natürlich bleibt immer auch die Möglichkeit, Tabellen im Text-Modus von WordPress komplett von Hand in HTML zu coden. Das macht aber definitiv nur echten HTML-Code-Freaks Spaß und WordPress verzeiht dabei nicht den kleinsten Fehler. Sobald es Fehler im HTML-Code entdeckt, versucht es, selbigen zu korrigieren – was meist in einer zerstörten Tabelle endet.

Weitgehend untauglich ist auch der Import von Tabellen aus einem Textverarbeitungsprogramm wie Word. Denn dabei werden typischerweise einige unerwünschte Formatierungen automatisch übernommen. Insbesondere überträgt Word auch die exakte Breite der Tabellenspalten. Dadurch ist die Tabelle dann definitiv nicht responsiv.

Keine gute Alternative ist der Import von Tabellen aus Word: Feste Spaltenbreiten im HTML-Code blockieren eine responsive Darstellung.

Keine gute Alternative ist der Import von Tabellen aus Word: Feste Spaltenbreiten im HTML-Code blockieren eine responsive Darstellung.

Und auch die Tabellenfunktion des beliebten Editor-Plugins TinyMCE Advanced ist weitgehend untauglich. Denn es ist kaum zu verhindern, dass das Plugin automatisch feste Breiten für Spalten anlegt. Wie bei einem Tabellen-Import aus Word sind diese Tabellen dann nicht responsiv und sehen selbst bei normalen Bildschirmauflösungen selten wirklich gut aus.

Eure Erfahrungen?

Wie ist Eure Erfahrung mit Tabellen in WordPress? Setzt Ihr Plugins ein, vermeidet Ihr Tabellen komplett oder habt Ihr einen eigenen Weg gefunden, Tabellen ansprechend darzustellen und halbwegs komfortabel zu erstellen und zu verwalten?

Tags: WordPress

Der Autor:

Autor: Franz Neumeier

Ich bin Franz Neumeier, war jahrelang Chefredakteur bei IT-Zeitschriften wie PC Professionell, Internet Professionell und Internet Magazin. Inzwischen habe ich mich als freier Autor vor allem auf Kreuzfahrt-Themen spezialisiert, betreibe mehrere Websites und schreibe für STRATO über verschiedene Themen, vor allem über WordPress und übers Bloggen.

7 Kommentare

  1. www.bybill.de sagte am 15. Oktober 2017 um 17:39:

    Schon deprimierend, dass WordPress von Haus aus keine Tabellen Funktionen hat. Danke für die Hilfen

    Antworten
  2. Ralf sagte am 27. Oktober 2018 um 11:44:

    Gibt es einen Code, den ich mit Strg C / Strg V einfügen Kann?

    Antworten
  3. Christof Stattmann sagte am 8. Dezember 2018 um 15:30:

    Hallo, gibt es eine Möglichkeit bei einer Tabelle, in der ich am Ende eine Summe einer Spalte ausgebe, dass diese Summe nach Filtererung nur die Summe der gefilterten Werte anzeigt?

    Danke für die Hilfe

    Antworten
    • Lisa Kopelmann sagte am 10. Dezember 2018 um 15:07:

      Hallo Christof,

      von unserem Autor Franz gibt’s dazu folgende Rückmeldung:

      „Mir ist kein Plugin bekannt, das so etwas ermöglichen würde. Die Schwierigkeit dabei ist, dass die Filterung durch JavaScript geschieht und die ausgefilterten Zeilen/Spalten jeweils nur ausgeblendet, aber nicht aus der Tabelle als solcher entfernt werden. Simpel gesagt: Der Filter verändert das Design, aber nicht die Tabelleninhalte selbst, weswegen auch keine Neuberechnung der Zahlenwerte in den Tabellenfeldern möglich ist. Bei den hier beschriebenen Tabellen handelt es sich eben nicht um ein „Excel light“, sondern um eine rein optische Präsentation von Tabellen.“

      Viele Grüße
      Lisa

      Antworten
      • Christof sagte am 13. Dezember 2018 um 14:00:

        Hallo Lisa, vielen Dank für die Nachricht, würde eine eigene Datenbank hier helfen, wo die Filterung entsprechend richtige Werte ausgeben kann? Wie könnte ich das sonst realisieren?

        Gruß Christof

        Antworten
        • Lisa Kopelmann sagte am 14. Dezember 2018 um 17:30:

          Hallo Christof,

          leider eignet sich keines der im Beitrag angesprochenen Plugins für den von Dir gewünschten Zweck. Einen Weg, die Filterung entsprechend einzustellen, können wir Dir leider nicht aufzeigen.

          Viele Grüße
          Lisa

          Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent