Tabelle in WordPress einfügen

Wer mit WordPress arbeitet wird früher oder später an den Punkt kommen, wo man mal eine Tabelle benötigt. Was für jeden eine Grundfunktion darstellt, fehlt in WordPress leider. Doch mit Hilfe von etwas HTML Kenntnissen oder einem Plugin lässt sich auch dieses Problem ruck zuck lösen. Heute erkläre ich dir wie.

HTML Tabelle erstellen

Wer Grundlegende Kenntnisse in HTML hat, für den ist es nicht schwer eine Tabelle zu erstellen. Im Quellcode sieht sie so aus:

<table>
	<thead>
		<tr>
			<th>Artikelnummer</th>
			<th>Farbe</th>
			<th>Preis</th>
		</tr>
	</thead>
	<tbody>
	<tr>
		<td>A100578</td>
		<td>Rot</td>
		<td>69,99 €</td>
	</tr>
	<tr>
		<td>A100579</td>
		<td>Grün</td>
		<td>59,99 € <del>69,99 €</del></td>
	</tr>
	<tr>
		<td>A100580</td>
		<td>Blau</td>
		<td>64,99 €</td>
	</tr>
	</tbody>
</table>

… und in der eigentlichen Ausgabe, für dich als Besucher, so:

Artikelnummer Farbe Preis
A100578 Rot 69,99 €
A100579 Grün 69,99 €
A100580 Blau 59,99 € 69,99 €

Eine Exkursion in die HTML Grundkenntnisse würde nun etwas den Rahmen sprengen, aber vielleicht mache ich zu einem späteren Punkt mal ein kleines HTML Tabellen Tutorial. 🙂

WordPress Tabellen Plugin

Nun aber erstmal weiter im Text. Denn wenn dir der Code oben zu komplex erscheint, weichen wir an der Stelle auf ein Plugin aus. Hier gibt es jede Menge (vermutlich tausende) auf dem Markt. Wie z.B. TablePress oder auch die Editor-Erweiterung TinyMCE Advanced geben dir die Möglichkeit eine WordPress Tabelle zu erstellen. Während TablePress jedoch, speziell für Einsteiger, etwas kompliziert sein kann und TinyMCE Advanced zu viele weitere Funktionen mit sich bringt, verwenden wir stattdessen MCE Table Buttons. Dieses Plugin macht nur das was es soll. Es integriert eine Funktion zur Steuerung von Tabellen in deine Editor-Leiste. Nicht mehr. Nicht weniger. Bevor du dich wunderst; ja das Plugin wurde seit über 3 Jahren nicht mehr geupdatet, jedoch ist das nicht so wild denn es macht nichts weiteres als die Funktion zu aktivieren, die TinyMCE allgemein schon von Haus aus mit sich bringt, die jedoch in WordPress (WIESO AUCH IMMER!!1) nicht integriert wurde.

WordPress Tabelle einfügen

Einmal installiert findest du in deinem Visuellen Editor anschließend ein neuen Button zum Erstellen der Tabelle. Zunächst kannst du über den Punkt „Tabelle einfügen“ eine Tabellen mit beliebig vielen Spalten / Reihen einfügen, wie du es auch aus Word kennst.

WordPress Tabelle einfügen mit Hilfe von MCE Table Buttons

Sobald eine Tabelle erstellt ist (und dein Cursor sich innerhalb einer Spalte der Tabelle befindet) findest du weitere Optionen, wenn du nochmals auf das Tabellen Icon klickst.

Tabelleneigenschaften

Als nächsten Punkt hast du die „Tabelleneigenschaften„. Hier lassen sich z.B. innere und äußere Abstände der Zellen definieren, die Breite und Ausrichtung der Tabelle im Content oder aber auch die Rahmenstärke und deren Farbe sowie die Hintergrundfarbe. Ich setze beispielsweise mal die Hintergrundfarbe auf #f5f5f5.

Artikelnummer Farbe Preis
A100578 Rot 69,99 €
A100579 Grün 69,99 €
A100580 Blau 59,99 € 69,99 €

An der Stelle bitte beachten, das je nach Theme bestimmte Sachen durch die Theme eigene CSS Datei evtl. nicht funktionieren können.

Tabelle löschen

Anschließend findest du noch den Punkt „Tabelle löschen„, den ich glaube ich nun nicht großartig erklären muss. 😉 Falls doch: über diese Funktion kannst du die komplette WordPress Table wieder entfernen. Das geht aber auch, wenn du sie im TinyMCE komplett markierst und „zurück“, also text löschen, drückst.

Zelle

Der nächste Punkt wäre „Zelle„. Hier kannst du nochmal separate „Zelleneigenschaften„, nur für diese Zelle, definieren. Zum Beispiel die Breite & Höhe, den Zellentyp, die Ausrichtung oder auch wieder eine Hintergrundfarbe und noch weitere Sachen.

Artikelnummer Farbe Preis
A100578 Rot 69,99 €
A100579 Grün 69,99 €
A100580 Blau 59,99 € 69,99 €

Ein weiterer wichtiger Punkt ist „Zellen verbinden“ (oder teilen). So kannst du nebeneinander- oder übereinanderstehende Zellen zu einer verbinden. Die sogenannte colspan und rowspan Parameter machen dies möglich. In unserem Beispiel ist der Preis für die ersten beiden Artikel identisch und somit kann man diese wunderbar verbinden.

Artikelnummer Farbe Preis
A100578 Rot 69,99 €
A100579 Grün
A100580 Blau 59,99 € 69,99 €

Dazu klicken wir in die obere Spalte und wählen dann den Punkt „Zellen verbinden“ und geben in dem Feld „Zeile“ den Wert 2 statt 1 an. Somit wird nun die aktuelle (1) + 1 Spalte zu einer zusammengefügt.

Zeile

Hier sind die meisten Menüpunkte auch wieder selbst erklärend.

  • Zeile darüber einfügen: Füge eine neue Zeile über der markierten Zelle ein
  • Zeile darunter einfügen: Füge eine neue Zeile unter der markierten Zelle ein
  • Zeile löschen: Lösche die komplette Zeile der markierten Zelle
  • Zeileneigenschaften: Definiere Eigenschaften für alle Zellen in dieser Zeile, z.B. das Einfärben aller Zellen in dieser Zeile (siehe unten). Ein sehr wichtiger Punkt ist hier, das Definieren von Tabellen Kopfzeilen über den Punkt „Zeilentyp“
  • Zeile ausschneiden: Hier wird die komplette Zeile inkl. der Inhalte entfernt und in deinen Zwischenspeicher gesetzt. Somit kannst du sie (mit den letzten beiden Funktionen) an einer anderen Stelle einfügen
  • Zeile kopieren: Kopiere die komplette Zeile der markierten Zelle in deinen Zwischenspeicher
  • Zeile mit Inhalt davor einfügen: Mit dieser Funktion kannst du eine ausgeschnittene, oder kopierte einfügen.
  • Zeile mit Inhalt danach einfügen: gleiche Funktion wie die vorherige
Artikelnummer Farbe Preis
A100578 Rot 69,99 €
A100579 Grün
A100580 Blau 59,99 € 69,99 €
*Limited* A100593 Lila 79,99 €
A100594 Weiß 64,99 €
A100595 Schwarz 69,99 €

Spalte

Auch hier gibt’s nichts komplexes mehr. „Spalte davor / danach einfügen“ sorgt dafür, dass du eine neue Spalte in die Tabelle einfügen kannst, z.B. für Lagerbestand.

Artikelnummer Farbe Lagerbestand Preis
A100578 Rot 12 69,99 €
A100579 Grün 17
A100580 Blau 34 59,99 € 69,99 €
*Limited* A100593 Lila 5 79,99 €
A100594 Weiß 17 64,99 €
A100595 Schwarz 23 69,99 €

Und natürlich kannst auch über „Spalte löschen“ auch wieder komplette Spalten aus der Tabelle entfernen.


Fazit

Wie man sieht, es ist definitiv kein Hexenwerk und jeder kann in WordPress Tabellen erstellen und wenn man einmal das Grundprinzip von Tabellen verstanden hat geht es auch relativ flott von der Hand.

Schreibe einen Kommentar

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