Eine Datentabelle in WordPress aufzubauen bedeutet in der Regel, mit HTML zu kämpfen oder einen Shortcode einzufügen, den man nicht stylen kann Die Dynamische Tabelle Widget in Master-Addons für Elementor Lassen Sie eine visuell erstellen: Kopfspalten hinzufügen, Zeilen ausfüllen und jeden Teil aus dem Elementor-Panel stylen Kein Tabellen-Markup, kein Plugin-Lock-in.
Es passt zu allem, was in ein Raster gehört, wie Mitarbeiterverzeichnisse, Datenblätter, Zeitpläne oder Preislisten. Sie können Zellen zusammenführen, Symbole zu Kopfzeilen hinzufügen, die Zeilen abstreifen und einen Reaktionsmodus für Telefone einschalten. Unten finden Sie einen Durchlauf durch jede Einstellung, von den Kopfzeilenzellen bis zu den Styling-Tabulatoren.
Was das Dynamic Table Widget macht #
Das Widget erstellt eine Standard-HTML-Tabelle aus zwei Repeatern: einem für die Header-Zeile und einem für die Körperzellen. Jede Zelle ist ihr eigenes Element, sodass Sie den Text, die Ausrichtung und sogar die Spalten- oder Zeilenspannen steuern, ohne Code zu schreiben.
Es verfügt über drei Registerkarten: Inhalt für Kopfzeile, Körper und Einstellungen, Stil für Farben und Abstände und Erweitert für die üblichen Elementoroptionen. Das Ergebnis ist eine saubere, reaktionsfähige Tabelle, die zu Ihrem Thema passt.
Bevor Sie beginnen #
- WordPress Mit Elementor Installiert und aktiv.
- Master-Addons für Elementor Installiert und aktiv Neu im Plugin? siehe die Installationsführung.
- Die Daten, die Sie anzeigen möchten, skizziert als Spalten und Zeilen.
So fügen Sie das Widget Dynamische Tabelle hinzu #
Öffnen Sie im Elementor-Editor die Elemente Panel und suchen nach Dynamische Tabelle‘oder scrollen Sie in den Abschnitt Master Addons Ziehen Sie es auf Ihre Seite Es wird mit einer Beispieltabelle geladen, so dass Sie aus einem funktionierenden Layout statt aus einem leeren Raster bearbeiten.
Richten Sie den Tabellenkopf ein #
Öffnen Sie die Inhalt Tab. Die Tischkopf Abschnitt hält die Kopfzeile Die Tischkopf Umschalten zeigt oder verbirgt den Header und den Tischkopfzelle Der Repeater enthält ein Element pro Spalte.
Jede Header-Zelle hat ihre eigenen Untertabs Inhalt und Optionen. In Inhalt Sie stellen die Spaltenname und kann ein hinzufügen Symbol Daneben (Keine oder Symbol, aus der Icon-Bibliothek oder einem hochgeladenen SVG).Nutzen Artikel hinzufügen Spalten hinzuzufügen, das Kopiersymbol, um eine zu duplizieren, und das X, um sie zu entfernen.
Tischkörper ausfüllen #
Die Tischkörper Abschnitt hält die Zellen Jeder Gegenstand ist eine Zelle, und ein Neue Reihe? Markierungen umschalten, an denen eine neue Zeile beginnt, sodass Sie Zellen der Reihe nach hinzufügen und den Anfang jeder Zeile markieren.
Jede Körperzelle verfügt außerdem über Untertabellen zu Inhalt und Optionen:
- Text des Körpers: Der Zellinhalt mit einer Schreib-mit-KI-Option.
- Spaltenspannweite und Zeilenspannweite: Eine Zelle über Spalten oder Zeilen hinweg zusammenführen.
- Benutzerdefinierte Breite: Legen Sie eine feste Breite für diese Spalte fest.
- Ausrichtung: Links, Mitte, rechts oder innerhalb der Zelle rechtfertigen.
- Dekoration: Wenden Sie einen voreingestellten Stil an, um eine Zelle hervorzuheben.
Um die Tabelle zu vergrößern, klicken Sie Artikel hinzufügenGeben Sie den Zellentext ein und schalten Sie ihn ein Neue Reihe? Auf der ersten Zelle jeder neuen Zeile Hier kommt eine fünfte Mitarbeiterzeile hinzu.
Machen Sie den Tisch reaktionsfähig #
Die Einstellungen Abschnitt hat eine Responsive Table? Umschalten Mit ihm auf, der Tisch auf kleinen Bildschirmen wieder flows statt überlaufen, so jede Reihe stapelt in eine lesbare Karte auf Telefonen Dies ist die Einstellung, die Menschen vergessen, und es ist, warum ein Tisch auf dem Handy kaputt aussieht.
Den Tisch stylen #
Die Stil Tab aufgeteilt wird in Globaler Stil, Tischkopfstil, und Tischkörper„Plus Muster (eine Pro-Option). Die Globaler Stil Abschnitt setzt den tischweiten Look.
- Streifentisch: Zebrastreifen einschalten und die gestreifte Reihenfarbe auswählen.
- Hintergrundfarbe: Die Grundfarbe hinter den Zellen.
- Innenzellenpolsterung: Der Raum innerhalb jeder Zelle.
- Grenztyp und Grenzradius: Die Linien zwischen Zellen und die abgerundeten Ecken.
Header - und Body-Styling #
Die Tischkopfstil Abschnitt legt den Hintergrund, die Textfarbe, die Typografie und die Polsterung der Kopfzeile so fest, dass die obere Reihe auseinandersteht Die Tischkörper Abschnitt das gleiche für die Datenzellen.
- Hintergrundfarbe und Textfarbe: Die Farben der Körperzellen.
- Symbolgröße, Symbolfarbe und Symbolpolsterung: Styling für beliebige Zellsymbole.
- Ausrichtung und Typografie: Wie der Fließtext sitzt und aussieht.
Das Ergebnis auf der Seite #
Veröffentlichen oder Vorschauen und die Tabelle rendert mit Ihren Spalten, Zeilen und Streifen an Ort und Stelle und reagiert auf Mobilgeräten, wenn Sie das eingeschaltet haben.
Häufige Anwendungsfälle #
- Mitarbeiter - oder Teamverzeichnisse Mit Namen, Rollen und Kontaktdaten.
- Datenblätter Vergleich von Produktmerkmalen und -werten.
- Fahrpläne und Fahrpläne Für Kurse, Veranstaltungen oder Bürozeiten.
- Preislisten Das braucht kein volles Preistabelle.
- Datenzusammenfassungen Aus einer Tabellenkalkulation in ein gestyltes Raster gezogen.
Tipps für die Arbeit mit dem Dynamic Table Widget #
- Planen Sie zuerst Spalten. Legen Sie jede Header-Zelle fest, bevor Sie den Körper füllen, sodass die Zeilen ausgerichtet sind.
- Markieren Sie die neue Reihe nur in der ersten Zelle. Markieren Sie den Anfang jeder Zeile, nicht jeder Zelle, oder das Layout bricht.
- Aktivieren Sie den Responsive Table für Telefone. Wide Tables laufen auf dem Handy über, es sei denn, dies ist aktiviert.
- Verwenden Sie Streifen für lange Tische. Zebra-Reihen erleichtern das Scannen einer großen Datentabelle erheblich.
- Zellentext kurz halten. Lange Saiten dehnen eine Säule, also verwenden Sie die benutzerdefinierte Breite, um die Dinge gleichmäßig zu halten.
Häufig gestellte Fragen #
Was ist das Dynamic Table Widget in Master Addons?
Es handelt sich um ein Elementor-Widget, das visuell eine HTML-Datentabelle erstellt. Sie fügen Header-Spalten und Körperzellen über Repeater hinzu und stilisieren dann die Farben, Polsterungen, Ränder und Streifen aus dem Panel. Es ist kein HTML- oder Shortcode beteiligt und die Tabelle kann reaktionsschnell gestaltet werden.
Kann ich Zellen in der Dynamischen Tabelle zusammenführen?
Ja. Jede Körperzelle hat in ihrer Untertablette Optionen für die Spaltenspanne und die Zeilenspanne Legen Sie eine Spanne fest, um diese Zelle über mehrere Spalten oder Zeilen hinweg zusammenzuführen, was für gruppierte Überschriften oder zusammenfassende Zeilen innerhalb der Tabelle nützlich ist.
Ist der Dynamic Table mobil responsive?
Ja. Der Abschnitt Einstellungen hat einen Responsive Table-Umschalter. Wenn er eingeschaltet ist, fliegt der Tisch auf kleinen Bildschirmen wieder, sodass jede Zeile in einen lesbaren Block gestapelt wird, anstatt die Seite überzulaufen, wodurch breite Tabellen auf Telefonen nutzbar bleiben.
Kann ich gestreifte Zeilen in die Tabelle aufnehmen?
Ja. Im Tab Stil hat der Abschnitt Global Style einen gestreiften Tischknebel und eine gestreifte Hintergrundfarbe Schalten Sie ihn ein, um Zebrastreifen hinzuzufügen, die die Zeilenfarbe wechseln und lange Tabellen viel einfacher lesbar machen.
Kann ich Symbole zu den Tabellenüberschriften hinzufügen?
Ja. Für jede Header-Zelle ist eine Typoption auf Symbol gesetzt, in der Sie ein Symbol aus der Bibliothek auswählen oder eine SVG hochladen. Das Symbol wird neben dem Spaltennamen angezeigt, der dabei hilft, Spalten wie E-Mail, Telefon oder Standort auf einen Blick zu kennzeichnen.
Einwickelnd #
Das Widget Dynamische Tabelle verwandelt Zeilen und Spalten von Daten in eine saubere, gestylte Tabelle, ohne HTML zu berühren Legen Sie Ihre Header fest, fügen Sie die Körperzellen hinzu, markieren Sie jede neue Zeile und gestalten Sie dann die Farben, Streifen und Ränder so, dass sie zu Ihrer Seite passen Zu verwandten Datenlayouts siehe die Vergleichstabellen-Widget und die Preistabellen-WidgetDurchsuchen Sie das Ganze Master Addons Widgets und Erweiterungen& überprüfen Sie die Preisseite Für das, was jeder Plan beinhaltet.
