Easy Table

WordPress-Tabellen mit Shortcodes erstellen

Easy Table

Easy Table

Easy Table ist ein WordPress-Plugin, mit dem sich Tabellen allein durch Shortcodes erstellen lassen. Dadurch wird es möglich, Tabellen direkt im Editor von Beiträgen, Seiten, Widgets oder von beliebig anderen Inhalten zu erstellen, die Shortcodes unterstützen.

Easy Table hat – anders als das Plugin TablePress – keine grafische Benutzeroberfläche, sondern verwendet stattdessen die Daten, die zwischen dem öffnenden und dem schließenden Shortcode-Tag stehen. Dabei werden neue Tabellen-Spalten durch Kommas ,, und neue Tabellen-Zeilen durch Zeilenumbrüche eingeleitet.

Verwendung #

Die Funktionsweise von Easy Table lässt sich am besten durch ein kurzes Beispiel nachvollziehen. Dazu reicht es schon aus, den folgenden Code in den Editor eines WordPress-Beitrags einzugeben, und ihn zu speichern:

Vorname, Nachname, Alter
Johannes, Kraut, 44
Anna, Log, 37
Jim, Panse, 21
Adam, Sapfel, >99
Kurt, Schluß, 0

Hiermit wird eine Tabelle mit den drei Spalten Vorname, Nachname und Alter erstellt. Jede Textzeile stellt auch eine eigene Zeile in der Tabelle dar, wobei die erste Zeile der Tabelle-Kopf ist.

Wird die Seite bzw. der Beitrag nun gespeichert und anschließend angesehen, wird die folgende Tabelle dargestellt:

Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

Einstellungen #

Die Einstellungen von Easy Table

Die Einstellungen von Easy Table

Über die Einstellungen von Easy Table können globale Darstellungs- und Verhaltensweise konfiguriert werden. Diese sind in mehrere Abschnitte eingeteilt.

Generelles #

Zu den generellen Einstellungen zählt als wichtigste Option der Name des Shortcode-Tags, auf den Easy Table hört, per Standardeinstellung ist das table. Nutzt man mehrere Tabellen-Plugins, die den gleichen Shortcode benutzen, so sollte man diesen gegebenenfalls ändern, um ein Konflikt zwischen beiden Plugins zu vermeiden.

Außerdem kann man Einstellen, auf welchen Inhalten die CSS- und JavaScript-Dateien von geladen werden. Hier sollte man am besten nur die Inhalts-Typen auswählen, auf denen man auch tatsächlich Tabellen verwendet, um den Seitenaufbau so nicht unnötig zu belasten.

Zusätzlich kann man auch auswählen, ob die JavaScript-Datei im Footer-Bereich der HTML-Seite platziert werden soll. Dies empfiehlt sich aus Performancegründen, da die JavaScript-Datei so erst nach dem Inhalt der Seite geladen wird, und der Seitenaufbau dadurch nicht angehalten wird.

Tabellen #

Über die Tabellen-Einstellungen lassen sich die Standardwerte der von Easy Table erzeugten Tabellen konfigurieren. Dazu gehört als erstes Option, ob es den Besuchern möglich ist, die Tabellen nach einem Feld zu sortieren. Zudem lässt sich festlegen, ob die erste Zeile der Tabellen-Kopf sein soll, sowie ob das Standarddesign von Easy Table genutzt werden soll, oder ob das verwendete Theme ein ein eigenes Design hierfür verwendet.

Dazu können auch noch CSS-Klassen der Tabellen, die Breite (per Standardeinstellung 100%), der Rahmen (per Standard 0), und die Ausrichtung der Tabelle (per Standard nach links) eingestellt werden.

Darunter kann auch noch ein Standard-Design für die Tabellen ausgewählt werden, wovon momentan aber nur 3 verschiedene zur Verfügung stehen. Außerdem folgen noch ein paar fortgeschrittene Einstellungen, die für die meisten Nutzer jedoch uninteressant sein sollten.

Die Tabellen-Einstellungen lassen sich über die jeweiligen Shortcodes für jede Tabelle individuell festlegen.

Shortcodes #

Den Shortcodes von Easy Table können Parameter übergebenen werden, womit sich unter anderem auch die Standardeinstellungen der Tabellen überschreiben lassen.

width #

Der Parameter width gibt die Breite einer Tabelle an. So ergibt der startende Shortcode [][table “” not found /]
[/]
die folgende Tabelle:

Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

align #

Mit dem Parameter align lässt sich festlegen, in welche Richtung eine Tabelle ausgerichtet ist. So ergibt der Code [][table “” not found /]
[/]
eine nach rechts ausgerichtete Tabelle:

Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

caption #

Mit caption lässt sich der Tabelle eine Überschrift geben. Der Code [][table “” not found /]
[/]
ergibt:

Eine kurze Tabelle mit Vorname, Nachname und Alter.
Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

th #

Mit th lässt sich Einstelle, ob die erste Zeile eine Kopfzeile sein soll. Mit dem Shortcode [][table “” not found /]
[/]
lässt sich die Kopfzeile deaktivieren:

Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

tf #

Dem hingegen regelt tf die Fußzeile der Tabelle, die aus der zweiten Tabellen-Zeile genommen wird. Ist der Tabellen-Kopf jedoch deaktiviert, wird dafür die erste Zeile verwendet. Mit [][table “” not found /]
[/]
lässt sich die Fußzeile aktivieren:

Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

tablesorter #

Der Parameter tablesorter gibt an, ob die Besucher die Tabelle sortieren können. Ist diese Option aktiviert, können die Zeilen der Tabelle anhand einer Spalte sortiert werden. Das sieht dann folgendermaßen aus:

Vorname Nachname Alter
Johannes Kraut 44
Anna Log 37
Jim Panse 21
Adam Sapfel >99
Kurt Schluß 0

weitere Parameter #

Zudem unterstützt Easy Table noch einige weitere Parameter, das sind unter Anderem:

  • id – legt die HTML-ID der Tabelle fest
  • class – legt die CSS-Klasse(n) der Tabelle fest
  • border – legt die Stärke des Tabellen-Rahmens fest
  • style – legt benutzerdefinierte CSS-Anweisungen fest
  • colwidth – legt die Breiten der einzelnen Spalten fest, einzelne Werte werden dabei mit einem | voneinander getrennt
  • colalign – legt die Ausrichtungen der einzelnen Spalten fest, die Werte werden hierbei ebenfalls mit einem | getrennt
  • ai – indexieret die Tabelle und nummeriert sie mit einer zusätzlich an den Anfang gesetzten Spalte, dabei wird an den Parameter die Zahl übergeben, bei der die Zählung beginnen soll
  • sorter – gibt an, nach welchen Spalten die Tabelle sortiert werden soll
  • limit – begrenzt die maximal zu verarbeitenden Tabellen-Spalten
  • file – verwendet eine .csv-Datei für den Inhalt der Tabelle, anstelle des Shortcode-Inhaltes

Genaueres zu den einzelnen Parametern findet sich im Plugin-Verzeichnis, sowie auf der zugehörigen Webseite des Entwicklers.

Es gibt 10 Kommentare gehe zum kommentieren

Alex schreibt am

Fein!
Gibt es auch eine Möglichkeit, dass Seitenbesucher (z.B. in einem internen Bereich) selbst in die Tabelle eintragen können? Quasi eine interaktive Tabelle?
Das wäre für eine Teilnehmerliste prima.

Antworten »
Schlüsselluder (Website) schreibt am

Das ist ein schönes Plugin um unsere Preislisten einzubinden. Auf jeden Fall ein Versuch wert

Antworten »
falk schreibt am

Ich lese dies hier: Der Parameter width gibt die Breite einer Tabelle an. So ergibt der startende Shortcode [][table “” not found /]
[/] die folgende Tabelle: Ich denke, hier stimmt etwas nicht, weil ja eigentlich das Beispiel kommen sollte. Kann diese Anleitung bitte ein „update“ erfahren. Dies wäre sehr hilfreich! Danke!

Antworten »
Willi Witt (Website) schreibt am

Ein wirklich sehr informativer Beitrag schnell und einfach zu verstehen für User wie mich die nicht viel von Pc und Co verstehen. Sehr erfolgreich.

Antworten »
Manuel (Website) schreibt am

Hallo,

Danke für den Beitrag! :)

nur leider stand nicht drin was ich gesucht habe, vielleicht geht es ja auch nicht oder vielleicht könnt Ihr mir ein Tipp geben.

Ich benutze Easy Table sehr gerne, weil es einfach ist und mir das Design gefällt. Jetzt habe ich das Problem das ich Zahlen in eine Tabelle einfügen will die zusammen gehören aber mit Kommas getrennt sind.

Ihr könnt euch wahrscheinlich denken wo mein Problem ist. Jedes mal macht er mir natürlich nach jedem Komma eine neu Spalte. Ich hätte es aber gerne das die Zahlen die zueinander gehören zusammen bleiben.

Kann man das einstellen?

Danke schon mal :)

Antworten »
Homepage_erstellen (Website) schreibt am

Toller Beitrag! Gut geschrieben! Habt ihr Tipps wie man eine einfache Homepage machen kann?

Antworten »

Hinterlasse eine Antwort!




Blogroll · Kontakt · Impressum