• Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Awantego

  • Unique Content
  • Lead Pilot
  • Websites
  • Blog
  • Kontakt
You are here: Home / Tutorials / Tutorial: Tablepress – einfach eine Tabelle erstellen

1. Juni 2017 by Katharina Berger 1 Comment

Tutorial: Tablepress – einfach eine Tabelle erstellen

Tablepress ist eines von WordPress’ beliebtesten Plug-Ins. Mit diesem läßt sich in WordPress schnell eine Tabelle erstellen. Ferner werden sämtliche, durch Tablepress erstellte, Tabellen übersichtlich angeordnet und auch das Styling ist schlicht gehalten. Momentan wurden fast 3000 Bewertungen abgegeben, davon knapp 96 % mit der höchstmöglichen Anzahl von 5 Sternen. Wie genau Sie Tablepress auf Ihrem Theme installieren und anwenden zeigen wir Ihnen mit diesem Tutorial.

Hinweis: Die Installation ist in der Plugin-Sektion von WordPress.org beschrieben.

Inhalt

  • Schritt 1: Plug-In Tablepress installieren
  • Schritt 2: eine neue Tabelle mit Tablepress erstellen
  • Schritt 3: Einfügen der Tabelle in Ihrem Beitrag und weitere Optionen
    • CSS Styling Optionen von Tablepress
  • Fazit: Eine Tabelle erstellen mit Tablepress

Schritt 1: Plug-In Tablepress installieren

Tablepress Screenshot 1Wie bei jedem Plug-In müssen Sie auch Tablepress zunächst installieren um später dann für WordPress eine Tabelle erstellen zu können. Dieses Plug-In lohnt sich vor allem für Sie, wenn Sie viele Informationen kompakt präsentieren sowie lange Fließtexte mit einer Tabelle “aufbessern” möchten.

Denn für Besucher auf Ihrer Seite sind reine Fließtexte meist beschwerlicher zu lesen, als Texte mit Tabellen, Bildern oder anderen medialen Zusätzen.

Dafür einfach in der Suchleiste „Tablepress“ eingeben. Hierbei wird das Plug-In von WordPress meist als Erstes vorgeschlagen. Auf Installieren klicken, danach aktivieren und schon ist das Plug-In einsatzbereit. Tablepress ist dabei in vielen Sprachen zugänglich, so ist eine Bedienung auch z.B. auf Deutsch, Englisch und Französisch möglich.

Schritt 2: eine neue Tabelle mit Tablepress erstellen

Sie können entweder links in der Navigationsleiste von Tablepress „Add New Table / Neue Tabelle hinzufügen“ oder oben in der 2. Spalte „Add New / Neu hinzufügen“ anklicken um eine Tabelle zu erstellen. Daraufhin werden Sie aufgefordert einen Namen und, optional, eine Beschreibung für Ihre Tabelle anzulegen.

Jede neu hinzukommende Tabelle erhält dabei ihre eigene, persönliche ID-Nummer. Damit können Sie einen Überblick über Ihre Inhalte beibehalten. Zusätzlich können Sie bereits hier die Anzahl an Zeilen und Spalten eintragen. Sollten Sie im Verlauf des Ausfüllens aber merken, dass Sie doch mehr Zeilen bzw. Spalten benötigen, dann lässt sich dies sehr simpel anpassen.

Tablepress Screenshot 2Ihre neue Tabelle sieht zu Beginn sehr schlicht aus. Es ist empfehlenswert zunächst den Inhalt der Tabelle optimal zu gestalten und sich am Ende mit dem generellen Styling zu beschäftigen. Beginnen Sie also zunächst mit der Beschriftung ihrer Zeilen und Spalten. Des Weiteren finden unter den Feldern verschiedene Funktionen, um den Tabelleninhalt weiter anzupassen.

  1. Die erste Möglichkeit ist es in einem spezifischen Feld in einer Zeile bzw. Spalte einen Link, ein Bild oder weitere Formatierungen einzufügen. Unter weitere Formatierungen sind die typischen Textformatierungen fett, kursiv, durchstreichen o.ä. zu verstehen. Außerdem ist für die Handhabung zu erwähnen, dass zuerst auf die auszuführende Funktion und dann auf das gewünschte Feld in der Tabelle zu klicken ist.
  2. Als nächste Tabellenformatierung ist es möglich bestimmte Zeilen bzw. Spalten zu verstecken, zu duplizieren, einzufügen oder zu löschen. Das Duplizieren ermöglicht es Ihnen eine komplette Zeile bzw. Spalte samt dem bereits vorhandenen Inhalt zu kopieren. Man verdoppelt sozusagen einfach nur den ausgewählten Bereich. Bei einer duplizierten Zeile verschiebt sich die Tabelle nach unten, bei einer Spalte nach rechts.
    Das Einfügen an ausgewählter Stelle (dazu einfach ein Häkchen neben die Nummer der Zeile bzw. unter dem Buchstaben der Spalte setzen) verschiebt alle nachfolgenden Reihen nach unten bzw. nach rechts.
  3. Die Funktion “Add 1 row/column” bzw. “Füge 1 Zeile/Spalte hinzu” verschiebt die Anordnung der Tabelle nicht, sondern fügt eine neue Zeile am Fuße der Tabelle hinzu bzw. eine neue Spalte rechts an der Tabelle.
  4. Zudem können Sie Zeilen, wie auch Spalten, verbinden. Hierbei wird aber nicht der Inhalt beider Felder übernommen, sondern nur der zuerst Ausgewählte. Der Inhalt des zweiten Feldes wird lediglich einen Platz weiter verschoben. Dies lohnt sich meist, wenn eine Zeile bzw. Spalte mehr Inhalt aufweist als alle anderen und Sie keinen Zeilenumbruch wünschen.

 

Tablepress Screenshot 3Unter den Formatierungen lassen sich noch weitere Einstellungen für die Tabelle tätigen. Hier können Sie zum Beispiel entscheiden, ob der Name und die Beschreibung der Tabelle für Ihre Besucher angezeigt werden soll. Denn in der Standard-Einstellung ist dies normalerweise deaktiviert.

Bei umfangreicheren Tabellen lohnen sich die Einstellungen im Bereich „DataTable JavaScript“, um Besuchern auf Ihrer Webseite eine Suchfunktion innerhalb der Tabelle zu ermöglichen. Wenn dies von Ihnen nicht gebraucht oder gewünscht wird, dann können Sie diese Funktion durch das Entfernen des Häkchens bei „Use DataTables“ abschalten.

Mehr zum Thema:
Yoast nutzen - So nutzen Sie Yoast für Ihren Text

Wenn alles nach Ihren Wünschen eingestellt ist müssen Sie nur noch die Tabelle abspeichern!

Schritt 3: Einfügen der Tabelle in Ihrem Beitrag und weitere Optionen

Tablepress vereinfacht das Einfügen in einen normalen Beitrag enorm. Hierzu einfach den Shortcode der gewünschten Tabelle kopieren und im Beitrag, an gewünschter Position, einfügen. Den Shortcode finden Sie bei der Bearbeitung Ihrer Tabelle oberhalb der Seite oder in der Übersicht all Ihrer Tabellen. Dort gibt es, wenn sie mit dem Cursor über den Tabellennamen fahren, die Option „Shortcode anzeigen“.

Des Weiteren können Sie bereits in Excel oder CSV erstellte Tabellen importieren, aber auch bei Tablepress erstellte Tabellen exportieren. Das Exportieren lohnt sich vor allem, um Ihre Tabellen an anderer Stelle abzuspeichern.

Falls die Farbgebung nicht Ihren Vorstellungen entspricht, kann unter “Plugin Options” -> Custom CSS eingefügt werden. Es sollte bereits der Code hinterlegt sein, der es Ihnen ermöglicht die Hintergrundfarbe der Tabelle abzuändern. Weitere Styling-Optionen, wie z.B. die Platzierung der Tabelle oder die Dicke des Rahmens sind ebenfalls möglich, dafür einfach die entsprechenden Codes eintragen.

CSS Styling Optionen von Tablepress

 

Änderung der Breite einer Spalte oder Zeile

.tablepress-id-N .column-2 {
width: 100px;
}

Ihre Tabellen ID-Nummer müssen Sie mit der id-N ersetzen. Außerdem können Sie, falls alle Spalten die gleiche Breite aufweisen sollen, alle weiteren Spalten eintragen. Dies sieht wie folgt aus:

.tablepress-id-N .column-1,
.tablepress-id-N .column-2,
.tablepress-id-N .column-3 {
width: 100px;
}

Dasselbe Vorgehen ist natürlich auch mit den Zeilen Ihrer Tabelle möglich. Möchten Sie beide gleichzeitig, also Zeilen wie auch Spalten, in einem Code festlegen, dann muss zuerst die Zeile genannt werden und dann die Spalte.

Änderung der maximalen Breite einer Tabelle

#tablepress-43_wrapper {
max-width: 100px;
}

Versuchen Sie einfach die “100px” mit anderen Werten zu ersetzen, um die richtige Breite der Tabelle für Ihr Theme zu erhalten.

Änderung der Ausrichtung einer Tabelle

.tablepress thead th {
text-align: left;
}

Modifikationen sind möglich in left, center oder right bzw. liks, zentral oder rechts.

Änderung der Ausrichtung deines Tabelleninhaltes

.tablepress-id-N .column-1,
.tablepress-id-N .column-2,
.tablepress-id-N .column-3, {
text-align: left;
}

Auch hier gelten dieselben Möglichkeiten der Ausrichtung, wie oben genannt. Spalten “column” können natürlich auch ersetzt werden mit Zeilen “row”.

Änderungen in der Farbgebung


.tablepress-id-N .column-1 {
width: 100px;
background-color: #ffffff;
}

Um die Farbe einer Spalte (oder einer Zeile) zu ändern wird der bereits weiter oben beschriebene Code erweitert durch den Zusatz “background-color”. Hier muss dann nur der richtige Code für die Farbe eingetragen werden. Zusätzlich dazu können Sie die komplette Tabelle farblich abändern; einfach nur “.column-1” entfernen. Um den Farbcode für mehrere Tabellen zu übernehmen können Sie in Ihrem Custom CSS die verschiedenen ID-Nummern angeben:

.tablepress-id-1,
.tablepress-id-2,
.tablepress-id-3,
.tablepress-id-4 {
width: 100px;
background-color: #ffffff;
}

Möchten Sie eine Farbveränderung, wenn der Cursor über eine bestimmte Spalte oder Zeile fährt, dann hilft Ihnen dieser Styling Code:

.tablepress-id-N .column-hover .column-N:hover td {
background-color: #ffffff;
}

“column-N” ersetzen  durch die Nummer Ihrer ausgewählten Spalte bzw. für eine Farbveränderung einer Zeile “row-N”.

Sollte eine Änderung nicht ersichtlich werden, kann dies unter anderem an den Tabellen-Einstellungen liegen. Ist die Suchleiste aktiviert oder gibt es einen Scroll-Balken, dann können eventuelle Änderungen der Tabelle nicht angezeigt werden.

Des Weiteren überträgt das aktivierte Theme manchmal auch nicht alle Veränderungen. Eine Möglichkeit Ihre eingetragenen Styling-Optionen doch erkenntlich zu machen, ist das Hinzufügen von “!important”. Dies dient als Priorisierung bei der Übernahme der Styling-Änderungen. Das kann beispielsweise so aussehen:

.tablepress-id-N .column-1 {
width: 100px !important;
background-color: #ffffff;
}

Weitere Styling Antworten zu bekannten Fragen bei Tablepress finden Sie im Support Forum von WordPress oder auf dieser CSS Tutorial Seite.

Fazit: Eine Tabelle erstellen mit Tablepress

Tablepress ist ein sehr ausgereiftes und zu Recht gut bewertetes Plugin für WordPress um eine Tabelle zu erstellen. Ich hoffe, Sie können mit diesem Tutorial nun auch selbst in Ihrem WordPress-Blog im Handumdrehen ihre Zahlen und Fakten in einer chicen Tabellen für ihre Leser darstellen. Viel Spaß dabei.

Ähnliche Artikel

  • Yoast nutzen - So nutzen Sie Yoast für Ihren Text 23. Juni 2019
  • Website mit WordPress erstellen - Theme auswählen 12. Februar 2019
  • Werbung ist was für SEO Versager 27. Februar 2019
  • WooCommerce Tutorial: Produktseiten mit Elementor erstellen 2. März 2020

Filed Under: WordPress Tagged With: Tabelle, Tabelle erstellen, Tablepress

Reader Interactions

Comments

  1. Wolfgang Neumüller says

    27. Juni 2020 at 16:07

    Diese Seite war von vielen die Hilfreichste! Danke

    Antworten

Schreiben Sie einen Kommentar Antworten abbrechen

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

Primary Sidebar

Neueste Artikel im Blog

Produktsuche online

Produktsuche im E-Commerce: So suchen Kunden nach Produkten

29. Oktober 2020

Was sind Produktkategorien im Marketing, wie werden diese erstellt und zu welchem Zweck?

8. Oktober 2020

Produktpräsentation im Online Shop

Produktpräsentation für E-Commerce: So verkaufen Sie online richtig

2. Oktober 2020

AXCD 2020: Die Content Konferenz

AXCD 2020: Wir sind dabei. Und Sie?

25. September 2020

Wirkungsvolle Tipps, um die Konversionsrate in Ihrem Online Shop zu steigern

11. September 2020

7 Tipps für professionelle Produktbeschreibungen

14. August 2020

Produktvorteile

So bringen Sie Produktvorteile in Ihren Produktbeschreibungen auf den Punkt

5. August 2020

So erstellen Sie Texte für Ihre Produktpalette

31. Juli 2020

5 Regeln einer erfolgreichen Produktpräsentation im Online Shop

24. Juli 2020

Kontakt zur Agentur

Agentur Awantego
Tel.: +49(0)711/48890-50
E-Mail: info@awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Traumjob bei Awantego:

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Downloads / Tutorials

  • Downloads
  • Tutorials
Weitere Anleitungen und Tutorials finden Sie im Blog von Awantego.com

Am meisten gelesen

  • Homepage erstellen
  • Viraler Content
  • Beste virale Kampagnen
  • Marketing Lexikon
  • Marketing Automation
  • Mehr Kunden mit Newsletter-Marketing
  • Was kostet Ihre neue Website?
  • Was ist WordPress?

Weitere Beiträge im Blog

Online Shops und Corona Krise: Welche Inhalte kommen gut an?

6. Mai 2020

Produktbeschreibungen für Online Apotheken erstellen

Produktbeschreibungen für Online Apotheken

30. April 2020

Amazon_SEO_Produktbeschreibungen Amazon

Produktbeschreibungen für Amazon: So erstellen Sie ansprechende Produkttexte

18. April 2020

5 Express Tipps für Online Shops in der Corona Krise

7. April 2020

Vorteile der automatischen Texterstellung für Unternehmen

1. April 2020

automatische Texte für E-Commerce

So schreiben Sie gute Kategorietexte für Ihren Online Shop

26. März 2020

automatische Texte erstellen

Automatische Texterstellung: Schreiben Sie Ihre Texte immer noch selbst?

20. März 2020

WooCommerce Tutorial: Produktseiten mit Elementor erstellen

2. März 2020

Konsumentenverhalten wirs immer mehr digitalisiert

Konsumentenverhalten 2020: Neuste Erkenntnisse aus der Konsumentenforschung

24. Februar 2020

KI

Wie können Online Händler von KI profitieren?

30. Januar 2020

Retouren

Tipps zur Senkung der Retourenquote

20. Januar 2020

automatische Textgenerierung

Automatische Textgenerierung für natürlich wirkende Texte aus Daten

3. Januar 2020

Die Rolle von Unique Content in der Content Marketing Strategie

12. Dezember 2019

Aktuelle Tutorials

  • Yoast nutzen – So nutzen Sie Yoast für Ihren Text

  • Ahrefs Tutorial

  • PDFs und Lead-Magnete mit ActiveCampaign versenden

  • WordPress umziehen

  • Interne Verlinkung

Footer

Kontakt

Digital-Agentur Awantego
Tel.: +49 (0)711/48890-50

E-Mail: info@awantego.com
Web: www.awantego.com

Anschrift
Breitscheidstraße 65
70176 Stuttgart

Jobs bei Awantego

Offene Stellen bei Awantego

  • Vertriebs-Mitarbeiter Online Marketing
  • Online-Marketing Spezialist (m/w/d)
  • Student / Praktikant (m/w/d)
  • Software-Entwickler php/Javascript (m/w/d)
  • Praktikant Online-Marketing (m/w/d)

Jetzt bewerben

E-Mail: jobs@awantego.com
Tel.: 0711-4889050

Gastautoren

Informationen für Gastautoren

Online Marketing Lexikon

Im Marketing-Lexikon von Awantego erläutern wir alle wichtigen Begriffe zum Thema Online-Marketing kompakt und verständlich.

Die wichtigsten Themen:

Automated Unique Content

Websites

Lead Pilot

Was kostet eine Website?

Online Marketing Downloads

Online Marketing Tutorials

Wichtige und anspruchsvolle Aufgaben beschreiben wir in der Rubrik
WordPress Tutorials .

Downloads & Anleitungen

Im Download-Bereich von Awantego.com finden Sie Anleitungen, Tutorials und eBooks rund um das Thema Marketing und WordPress

Neueste Beiträge im Blog

Mit diesen Tipps verhindern Sie den Kaufabbruch

Warum ist USP so wichtig für Ihr Marketing?

So erstellen Sie Produktbeschreibungen für erklärungsbedürftige Produkte

Machen Sie Ihren Online Shop bekannt: 5 wirkungsvolle Tipps für mehr Kunden

Produktnutzen beschreiben: Tipps für gute Produktbeschreibungen

Darum geht’s im Blog

Automatic Unique ContentAutomatische TexteContentContent-MarketingE-CommerceFacebookKunden gewinnenMarketingOnline-MarketingOnline ShopProduktbeschreibungenSEOSocial MediaSuchmaschinenoptimierungTextUnique ContentUnternehmenWebsiteWerbungWordpress
  • Jobs
  • Blog
  • Datenschutz
  • Disclaimer
  • Impressum
  • Awantego.com in English

© 2021 · Awantego.com ·

Diese Website benutzt Cookies. Wenn Sie die Website weiter nutzen, gehen wir von Ihrem Einverständnis aus.OK