WP Table Manager: Tabellen gestalten

1. Format

In der Symbolleiste können Sie Stileinstellungen für Zellen festlegen, z. B. Schriftart, Schriftgröße, Textstil, Hintergrundfarbe, Textfarbe, horizontale und vertikale Ausrichtung usw. Diese Einstellungen können für einzelne Zellen oder mehrere Zellen angewendet werden

Sie können den Prozentsatz für den Tabelleneditor auswählen. Das bedeutet, dass Sie Ihre Tabelle vergrößern und verkleinern können, im Bereich von 50 % bis 200 %.

Die Zeilenhöhe und Spaltenbreite können in Pixeln festgelegt werden. Gehen Sie zu Menü „Format“ > „Spalten-/Zeilengröße anwenden“ und wählen Sie dann „Spalte anpassen“ / „Zeile anpassen“ . Im Popup-Fenster können Sie den Bereich auswählen und die Pixel für Spalten oder Zeilen festlegen. Klicken Sie auf „ Fertig “, um den Vorgang abzuschließen.

2. Themen und Optionen

In jeder Tabelle finden Sie unter „Menü Design“ die Option zur Designauswahl . Klicken Sie einfach auf ein Design, um es anzuwenden.

Abwechselnde Farben

Im Menüpunkt „Design > Alternative Farben “ hilft Ihnen die Funktion „Automatische Formatierung“, die Linien Ihrer Tabelle mithilfe von Header- und Footer-Formatierungsoptionen . Sie können Vorlagenstile auswählen oder in den Plugin-Einstellungen eigene Stile erstellen.

Sie können die alternative Farbe entfernen, indem Sie im Kontextmenü (Rechtsklick) die Option „Entfernen >  Automatische Formatierung entfernen“

Tabellenausrichtung

Die Tabellenausrichtung dient dazu, den Bereich, der die gesamte Tabelle enthält, auszurichten, beispielsweise die gesamte Tabelle zu zentrieren. Sie finden diese Option unter Menü „Format“ > „Tabellenausrichtung“ .

Zellhervorhebung

Eine Zellenhervorhebung ist optional verfügbar. Diese Funktion kann in den Einstellungen aktiviert werden. Sie ist standardmäßig deaktiviert. Sie können die gewünschte Zeile auswählen, um Farbe und Deckkraft der Hervorhebung anzupassen.

3. Fügen Sie Zellen einen Tooltip hinzu

Bei jeder Zelle einer Tabelle können Sie die Option "Tooltip hinzufügen" durch einen Rechtsklick darauf sehen.

Sie können die Breite des Tooltips in Pixeln festlegen. Daraufhin wird ein Tooltip mit einem Bearbeitungseditor angezeigt.

Fügen Sie Inhalte hinzu und speichern Sie, fertig. Der Tooltip wird beim Überfahren mit der Maus auf der öffentlichen Seite angezeigt.

4. Zeilen- und Spaltenfixierung

Säulengefrieren

Die Spaltenfixierung finden Sie im Menü „ Format“ > „Responsive Optionen“ . Sie können bis zu 5 Spalten fixieren. Die Zählung beginnt mit der ersten Spalte.

Um Spalten/Zeilen einzufrieren, gibt es eine zusätzliche Option, mit der Sie die Höhe der Tabelle festlegen können (da Ihr Tabellencontainer möglicherweise eine unendliche Höhe hat).

Wenn Sie die zu fixierende Spalte ausgewählt haben, können Sie in Ihrer Tabelle scrollen und die fixierte Spalte wird immer angezeigt.

Reihengefrieren

Sie finden diese Option unter Menü Format > Tabellenkopf . Hier können Sie die Option aktivieren und festlegen, welche Zeilen fixiert werden sollen (bis zu 5 Zeilen).

Wenn Sie die Tischhöhe festlegen möchten, kehren Sie bitte zu den Responsive-Optionen zurück.

Anschließend wird die erste Zeile im Frontend entsprechend der Einstellung eingefroren.

5. Sortieren und Filtern

Wenn Sie Ihre Tabelle sortieren oder filtern möchten, navigieren Sie bitte zu Menü Option Sortieren und Filtern

Anschließend erscheint ein Popup mit Sortier- und Filteroptionen. 

Um eine Tabelle zu sortieren, aktivieren Sie einfach „Frontend sortierbar“ . Sie können eine Spalte für die Standardsortierung und deren Richtung auswählen.

Wählen Sie beispielsweise in diesem Fall Spalte A in aufsteigender Reihenfolge aus.

Es gibt 2 Filteroptionen:

• Innerhalb der Spalte: Sie können die Daten in der Kopfzeile jeder Spalte filtern. Mit dem Umschalter können Sie das Suchfeld in der Kopfzeile ein- oder ausblenden.

• Erweitertes Filterformular: Sobald diese Option ausgewählt ist, können Sie Daten in einer Tabelle suchen und filtern.

Hauptsuche: Wenn Sie diese Funktion aktivieren, wird im Frontend ein Suchfeld hinzugefügt. Dadurch können Benutzer die Daten in der Tabelle einfach durchsuchen.

6. Zellenabstand und abgerundete Ränder

Das Rahmensymbol, mit dem Sie den Abstand und den Radius der Zellen anpassen können, finden Sie in der Symbolleiste.

7. Benutzerdefiniertes CSS

Gehen wir noch einen Schritt weiter. Wenn Sie Webdesigner sind und über CSS-Kenntnisse verfügen, können Sie unter Menüformat > Benutzerdefiniertes CSS CSS hinzufügen.

Der CSS-Code wird mithilfe von Code Mirror farbig dargestellt und kann auch in Less CSS geschrieben werden, das funktioniert auch!

Zellen, Zeilen und Spalten besitzen Koordinaten, um jedes Element zu identifizieren und benutzerdefiniertes CSS anzuwenden. R steht für Zeile, C für Spalte.

8. Responsive WordPress-Tabellen

Sind meine Tabellen responsiv oder verwenden sie auf kleinen Geräten die Scrollfunktion?

Versteckte Spalten

WP Table Manager bietet optional ein Prioritätstool für responsives Design. Standardmäßig ist die Responsive-Funktion deaktiviert, wodurch ein Überlauf entsteht (der auf Mobilgeräten jedoch einwandfrei funktioniert). Um „Spalten ausblenden“ , gehen Sie zu Menüformat > Responsive Optionen.

Der responsive Modus bietet erweiterte Funktionen: Sie können festlegen, welche Spalten auf Mobilgeräten ausgeblendet werden sollen. Sind Spalten ausgeblendet, erscheint ein Menü mit einer Checkbox zum Ein- und Ausblenden.
Die Spaltengröße ist bei der Tabellenbearbeitung fixiert. Sind alle Spalten zu groß für den Container, entsteht ein Überlauf, der ein einfaches Scrollen auf Mobilgeräten ermöglicht.

Tabelle mit Scrollfunktion (besser geeignet für wenige Spalten)

Tabelle mit ausgeblendeten Spalten (besser geeignet für eine große Anzahl von Spalten)

Wiederholte Überschrift

Dies ist eine weitere Option, wenn Sie eine Tabelle in einem kleinen Bereich Ihrer Website einfügen möchten. Gehen Sie dazu auf Menüformat > Responsive Optionen. Wählen Sie anschließend Responsiver Typ > Wiederholte Kopfzeile.

Es wird Optionen zur individuellen Anpassung gemäß Ihren Wünschen geben:

• Responsiver Breakpoint (px): Wählen Sie einen Breakpoint-Wert in Pixeln, um festzulegen, wann die Tabelle in diesen responsiven Modus wechselt.
• Responsive maximale Höhe (px): Wenn der responsive Modus aktiviert ist, definieren Sie abhängig vom Breakpoint-Wert eine maximale Höhe, um eine sehr lange Tabelle zu vermeiden.
• Formatierung im responsiven Modus: Wenden Sie eine Standardformatierung für diesen responsiven Modus an oder verwenden Sie die Tabellenfarben.

Anschließend können Sie sehen, wie die Tabelle im Frontend aussehen wird.

„Wiederholte Überschrift“ verwenden und die Filteroption aktiviert ist, können Sie in der mobilen Ansicht filtern, indem Sie in das Textfeld tippen.

9. Export nach Excel

Um Ihre Tabelle auf Ihrem PC zu speichern, gehen Sie im Menü auf „Tabelle“ und klicken Sie auf „Excel exportieren“ . Die Datei wird nach dem Export im Frontend als *.xlsx gespeichert.

10. Seitenzahlen

Diese Funktion finden Sie in jeder Tabellenversion Menüformat > Seitennummerierung

11. Zellenrahmengestaltung

Sie können Ihrer Tabelle Rahmentypen wie Rahmenbreite, Rahmenfarbe und Rahmenstil zuweisen. Wählen Sie dazu zunächst den Zellbereich aus und klicken Sie anschließend auf das entsprechende Symbol in der Symbolleiste.

12. Tabelle im Frontend drucken

Manchmal müssen Sie Ihre Tabelle ausdrucken. Um die Schaltfläche „Drucken“ im Frontend anzuzeigen, navigieren Sie zunächst zum Menüpunkt „Tabelle“ und aktivieren Sie dort die Option „Drucken“.