Tabellen und Preislisten erstellen mit WordPress TablePress

Dieser Beitrag ist älter als zwei Jahre. Es kann also sein, dass auch der Inhalt - zumindest in Teilen - bereits veraltet ist.

Ob Preisliste, Speisekarte oder Rangliste im Sport, Tabellen sind im Web eine gute Möglichkeit, Preise oder Leistungen übersichtlich darzustellen. Von Hause aus gibt sich WordPress in diesem Fall eher schlicht, jedoch bietet das kostenfreie WordPress Plugin TablePress alle Möglichkeiten zur einfachen Erstellung von Tabellen.

Einfaches Erstellen von Tabellen… HTML Grundlagen

Wahrscheinlich jedem, der mal einen HTML-Kurs besucht hat, läuft bei dem Gedanken an die Aufgabe, Tabellen für das Web zu erstellen, ein kühler Schauer über den Rücken. Tatsächlich ist das gar nicht so einfach und erfordert sehr viel Disziplin. In den meisten HTML-Kursen gilt das Erstellen einer Tabelle noch immer als wesentliche Übungsaufgabe, um zu verstehen, dass HTML das Erstellen von Struktur bedeutet und dabei kaum Fehler verzeiht. Hat man einmal die Grundelemente einer HTML-Tabelle verstanden

<table></table> für die Tabelle an sich

<tr></tr> eine Tabellenzeile und

<td></td> für eine Tabellenzelle

und dabei auch einige Attribute für diese Markierungen (tags) kennen gelernt, so zum Beispiel die Definition für die Hintergrundfarbe (bgcolor=″blue″), den Rahmen (border=″1″), die Breite (width=″150px″), die Höhe (height=″75px″) oder das Verbinden von Zellen (rowspan=″2″) und von Zeilen (colspan=″3″), ist es möglich, ein Gemälde wie die Komposition mit Rot, Blau und Gelb von Piet Mondrian als HTML-Tabelle zu realisieren.

Die Bedeutsamkeit von HTML-Tabellen war übrigens mal wesentlich größer als heutzutage: Früher stellten verschachtelte Tabellen die Grundlage allen Handels des Webdesigns waren. Noch heute existieren solche Homepages, die auf Basis verschachtelter Tabellen erstellt wurden, auch wenn dieses Vorgehen längst überholt ist.

Eine Tabelle mittels der entsprechenden tags von Hand zu erstellen, ist natürlich auch in WordPress noch immer möglich und machbar. Erheblich leichter geht es jedoch mit dem so gelungenen WordPress Plugin TablePress des deutschen Entwicklers Tobias Bäthge. Schauen wir uns also die Bedienung und die einzelnen Funktionen etwas genauer an.

Erste Schritte mit TablePress

Nach der Installation erscheint in der Admin-Leiste ein neuer Menüpunkt: TablePress. Die Anwendung ist in sechs Bereiche gegliedert:

  1. Alle Tabellen
  2. Neue Tabelle
  3. Import
  4. Export
  5. Einstellungen
  6. Über

Gehen wir die einzelnen Punkte durch.

1. Alle Tabellen

Alle Tabellen liefert – der Titel verrät es bereits – eine Übersicht aller Tabellen, die Sie bisher erstellt haben. Nach der Installation des Plugins ist diese Übersicht naturgemäß leer. Später erscheinen hier Ihre Tabellen chronologisch aufgelistet, die zuletzt erstellte zuoberst. In dieser Liste finden Sie auch die ID jeder Tabelle, also jene Kennziffer, die Sie zum Einbau der Tabellen in einen Beitrag oder eine Seite benötigen.

Noch wichtiger ist jedoch, dass Sie von hier aus Zugriff auf die Bearbeitung aller bereits existierenden Tabellen haben. Auch können Sie hier einzelne Tabellen kopieren, löschen oder sich eine Vorschau ansehen.

2. Neue Tabelle

WordPress TablePress - Tabelle erstellen
Bereits beim Erstellen einer Tabelle mit WordPress TablePress geben Sie die Anzahl der Zeilen und Spalten an

Der Titel lässt es vermuten – über Neue Tabelle können Sie eine neue Tabelle anlegen: Hierzu geben Sie der Tabelle einen Namen, wenn Sie mögen auch eine kurze Beschreibung, und definieren die Anzahl der Zeilen und Spalten. Auch wenn Sie später in der Bearbeitung durchaus noch Zeilen und Spalten hinzufügen können, lohnt es sich, sich vor der Erstellung schon Gedanken über den Aufbau und die Struktur der Tabelle zu machen, um die Zahl der Tabellenzellen zu ermitteln. Mehr zum Erstellen und Bearbeiten einer neuer Tabellen – siehe weiter unten.

3. & 4. Import und Export

Grundsätzlich brauchen Sie für das Erstellen und Bearbeiten einer neuen Tabelle mit WordPress TablePress kein anderes Programm. Und doch kann es sein, dass Sie bereits mit einer anderen Software, sagen wir EXCEL, eine Tabelle erstellt haben. Oder Sie fühlen sich einfach mit Ihrem Tabellenprogramm wohler und möchten den Aufbau und die Dateneingabe lieber damit betreiben. Vielleicht benötigen Sie die Tabellen auch für andere Zwecke. Kein Problem für TablePress – das Plugin bietet Ihnen nämlich eine Import-Funktion. Möglich sind die Dateiformate .html, .csv, .json sowie (experimentell) .xls und .xlsx. Möchten Sie mehrere Dateien auf einmal hochladen, packen Sie diese zuvor in ein zip-Archiv.

Hochzuladende Dateien können dazu dienen, (1) eine neue Tabelle zu erstellen, (2) eine existierende Tabelle zu ersetzen oder (3) zu einer bereits existierenden Tabelle neue Zeilen hinzuzufügen.

Vergleichbar mit dem Import verhält es sich mit dem Export von Tabellen, der vor allem in Hinblick auf die Datensicherung bedeutsam ist. Auch hier sind die genannten Dateiformate möglich, wobei nur .json neben den eigentlichen Daten auch die weiteren Einstellungen der Tabellen übernimmt. Exportieren Sie mehrere Tabellen, schreibt TablePress diese in ein zip-Archiv.

5. Einstellungen

TablePress Tabellen kommen von Hause aus durchaus ansehnlich daher. Doch kann es sein, dass Sie spezielle Vorstellungen und Wünsche an das Design Ihrer Tabellen haben. In diesem Fall bietet der Menüpunkt Einstellungen Ihnen die Option der CSS-Bearbeitung: Mit den entsprechenden CSS-Definitionen können Sie hier Ihren Tabellen Ihr individuelles Design verpassen.

6. Über

Der Menüeintrag Über bietet Hinweise auf die Nutzung von TablePress, gibt Debug- und Versionsinformationen Ihrer Installation für Hilfsanfragen aus und stellt auch den Link zur Dokumentation des WordPress Plugins bereit.

Tabellen bearbeiten mit TablePress

WordPress TablePress - Tabelle bearbeiten
Nach dem Erstellen einer neuen Tabelle lässt diese sich direkt bearbeiten

Nachdem Sie eine Tabelle erstellt haben, können Sie diese direkt bearbeiten. Die Bearbeitungsseite zeigt Ihnen die Anzahl an Zeilen und Spalten an, die Sie zuvor gewählt haben. Dabei definiert TablePress standardgemäß die erste Zeile als Kopfzeile und die letzte als Fußzeile und hebt diese farblich hervor. Beides lässt sich abschalten.

In die einzelnen Zellen können Sie nicht nur wie im Beispiel Text, sondern auch Bilder und Verweise (Links) eingeben. Selbst komplexere HTML-Angaben weiß das Plugin zu interpretieren. Dabei ist es jederzeit möglich, Spalten oder Zeilen hinzuzufügen beziehungsweise zu löschen oder zu verbinden.

Darüber hinaus bietet TablePress Filter-, Such- und Sortiermöglichkeiten für die Nutzer Ihrer Website, die sich hier hinzu oder abschalten lassen (standardgemäß sind sie hinzu geschaltet). Zudem können Sie eine horizontale Scroll-Funktion bei sehr breiten Tabellen aktivieren (standardgemäß ist diese abgeschaltet). Kurz: Der Programmierer hat einfach an alles gedacht, was Tabellen schöner macht!

Einfügen einer Tabelle in eine Seite oder einen Beitrag

Nachdem Sie Ihre Tabelle erstellt und ihr Aussehen über die Vorschau kontrolliert haben, müssen Sie diese nun noch im Rahmen eines Beitrages oder einer Seite veröffentlichen. Dies funktioniert über einen Shortcode, den Sie in der Tabellen-Übersicht (alle Tabellen) oder in der Tabellen-Bearbeitung oben rechts finden. (Shortcodes sind Programmbefehle in WordPress, die das CMS dazu veranlassen, etwas auszuführen). Der TablePress Shortcode sieht recht übersichtlich aus:

[table id=2 /]

Dieser schlichte Befehl fügt die Tabelle 2 in die Seite oder den Beitrag ein. Mehr ist nicht zu tun. Unsere wunderbare Pizza-Tabelle sieht im wahren Leben dann übrigens so aus:

WordPress TablePress - fertige Tabelle
Mit WordPress TablePress erstellte Pizza Speisekarte

Fazit

Hut ab vor dem Programmierer, der hier ein tolles Plugin kostenlos zur Verfügung stellt. Von uns ein klares »Gefällt uns!«


Beitragsbild: Britta Kretschmer

 

2 Gedanken zu „Tabellen und Preislisten erstellen mit WordPress TablePress

  1. Hallo,

    die TablePress Tabellen zeigen an sich ja nur eine feine Linie zwischen den Tabellenzeilen. Die lässt sich entfernen mit .tablepress tbody td {border-top: none;}.
    Die gesamte Tabelle mit der ID 1 lässt sich ansprechen mit .tablepress.tablepress-id-1.dataTable {}.

    LG, bk

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen