So erstellen Sie eine Tabelle in Elementor (4 Wege, mit Schritten)

Wichtige Erkenntnisse

• Elementor hat kein Tabellen-Widget im Kern-Plugin oder in Elementor Pro, daher stammt eine Tabelle in Elementor aus HTML-Code, Containern, einem Tabellen-Plugin oder einem Addon-Widget.
• Das HTML-Widget ist die Möglichkeit, eine Tabelle in Elementor ohne Plugin zu erstellen: Fügen Sie Tabellen-, Tr-, Th- und TD-Tags ein und fügen Sie einen kurzen Stilblock für Ränder und Auffüllung hinzu.
• Ein Grid-Container kann eine Tabelle imitieren, aber eine 3-Spalten-4-Zeilen-Tabelle benötigt 12 separate Texteditor-Widgets und das Ergebnis ist keine echte HTML-Tabelle.
• TablePress 3.4 fügt ein eigenes Elementor-Widget namens TablePress-Tabelle hinzu und seine Tabellen können von Besuchern sortiert, durchsucht und paginiert werden.
• Das Master Addons Dynamic Table Widget baut eine echte HTML-Tabelle aus Header - und Body-Zellen im Elementor-Panel auf und stapelt Zeilen in Karten auf Geräten mit einer Breite von bis zu 768 px.

Um eine Tabelle in Elementor zu erstellen, benötigen Sie eine Problemumgehung, da Elementor kein Tabellen-Widget ausliefert. Die vier, die funktionieren, sind ein HTML-Widget mit Ihrem eigenen Code, ein Grid-Container, eine TablePress-Tabelle und ein Addon-Widget wie z Dynamische Tabelle.

Wir haben auf Elementor 4.3 jeweils einen Tisch erstellt und uns jeden auf einem Desktop und einem Telefon angesehen.

Hat Elementor ein Tabellen-Widget?

Nr. Suche nach “Tabelle” im Elementor-Panel und die einzigen integrierten Ergebnisse sind Inhaltsverzeichnis und Preistabelle, und beide gehören zu Elementor Pro. Keiner von beiden macht Zeilen und Spalten von Daten Preistabelle ist eine einzige Preiskarte, und Inhaltsverzeichnis listet die Überschriften auf der Seite.

Welchen Weg soll man nutzen?

Wählen Sie danach, wie groß der Tisch ist und wer ihn später bearbeiten wird.

Weg 1: Erstellen Sie eine Tabelle in Elementor mit dem HTML-Widget

So kann man eine Tabelle in Elementor ohne Plugin erstellen Man schreibt eine einfache HTML-Tabelle und Elementor druckt sie so aus, wie sie ist.

1. Bearbeiten Sie die Seite mit Elementor und ziehen Sie die HTML Widget in einen Container.
2. Fügen Sie den untenstehenden Code in die ein HTML-Code Feld.
3. Ändern Sie den Text zwischen den Tags Jede tr Reihe ist, jeder th ist eine Headerzelle und jede td Körperzelle ist.
4. Klicken Sie auf Veröffentlichen.

<table class="simple-table">
  <thead>
    <tr><th>Plan</th><th>Storage</th><th>Price</th></tr>
  </thead>
  <tbody>
    <tr><td>Starter</td><td>10 GB</td><td>$5 a month</td></tr>
    <tr><td>Team</td><td>100 GB</td><td>$15 a month</td></tr>
    <tr><td>Business</td><td>1 TB</td><td>$45 a month</td></tr>
  </tbody>
</table>

<style>
.simple-table { width: 100%; border-collapse: collapse; }
.simple-table th, .simple-table td { padding: 12px 16px; border: 1px solid #e4e7ec; text-align: left; }
.simple-table th { background: #101223; color: #fff; }
.simple-table tbody tr:nth-child(even) { background: #f6f6f7; }
</style>

Der Tisch ist leicht und es ist ein echter table Element, das Suchmaschinen und Bildschirmleser verstehen Es ist jedoch schwieriger zu pflegen. Ein Client, der eine Zeile hinzufügen möchte, muss HTML bearbeiten, und ein fehlendes Schließ-Tag unterbricht das Layout.

Weg 2: Erstellen Sie einen Tisch mit einem Grid-Container

Ein Grid-Container legt Widgets in Zeilen und Spalten aus, sodass er wie eine Tabelle aussehen kann. Es passt zu einem kleinen Block, in dem Zellen Schaltflächen, Symbole oder Bilder enthalten.

1. Einen Behälter hinzufügen und einstellen Containerlayout zu Gitter.
2. Einstellen Spalten auf die Anzahl der Spalten, die Sie benötigen und Reihen zur Anzahl der Zeilen, Kopfzeile enthalten.
3. Einstellen Lücken 0, damit sich die Zellen berühren.
4. Ziehen Sie einen Texteditor Widget in jede Zelle und geben Sie deren Text ein.
5. Auf jedem Widget öffnen FortgeschrittenDann hinzufügen Polsterung und ein 1px Grenze. Geben Sie den Header-Zellen eine Hintergrundfarbe.

Die Widget-Zahl wächst schnell Drei Spalten und vier Zeilen benötigen bereits 12 Widgets, und eine 5 x 10 Tabelle benötigt 50. Grenzen verdoppeln sich dort, wo Zellen aufeinandertreffen, es sei denn, Sie stimmen jede Seite ab Die Ausgabe ist ein Satz Divs, also gibt ein Screenreader sie nicht als Tabelle an Behalten Sie diese Methode für eine Handvoll Zellen bei.

Weg 3: Fügen Sie Elementor eine TablePress-Tabelle hinzu

TablePress ist ein Tabellen-Plugin mit mehr als 600.000 aktiven Installationen, man baut die Tabelle auf einem eigenen Admin-Bildschirm auf und platziert sie dann in Elementor, sie ist die richtige Wahl für lange Tabellen, denn sie importiert Excel, CSV, HTML - und JSON-Dateien und lässt Besucher die Zeilen sortieren, suchen und durchblättern.

1. Installieren und aktivieren TablePress.
2. Gehe zu TablePressDann Neu hinzufügen Tabelle einzugeben, oder Import Datei hochzuladen.
3. Speichern Sie die Tabelle und notieren Sie sich ihre ID.
4. Bearbeiten Sie Ihre Seite mit Elementor und suchen Sie nach TabellePressetisch. Ziehen Sie das Widget hinein und wählen Sie Ihre Tabelle in der Tabelle Dropdown.
5. Wenn Sie einen Shortcode bevorzugen, ziehen Sie den Kurzcode Widget und eingeben [table id=1 /] Mit eigenem Ausweis.

Das Widget hat keinen Style-Tab, daher stammen Farben und Schriftarten aus den TablePress-Einstellungen und dem eigenen CSS. Bei unserem 390 px Testtelefon lief die Fünfspaltentabelle bis zum Einschalten auch am rechten Rand vorbei Horizontales Scrollen In den Einstellungen der Tabelle.

Weg 4: Verwenden Sie ein Tabellen-Widget

Ein Addon-Widget behält den ganzen Auftrag in Elementor, Sie geben Zellen im Panel ein und stylen die Tabelle im Style-Tab, genauso wie Sie mit jedem anderen Widget arbeiten Wir verwenden hier das Dynamic Table-Widget von Master Addons.

1. Installieren Sie Master Addons und überprüfen Sie das Dynamische Tabelle In seinen Widget-Einstellungen eingeschaltet ist.
2. Bearbeiten Sie die Seite mit Elementor, suchen Sie nach Dynamische Tabelle Und ziehen Sie es hinein Es beginnt mit einer Beispiel-Vierspaltentabelle.
3. Offen Tischkopf. Fügen Sie einen hinzu Tischkopfzelle pro Spalte und Typ jeweils Spaltenname.
4. Offen Tischkörper. Fügen Sie einen hinzu Tischkörperzelle Pro Zelle, von links nach rechts Einschalten Neue Reihe? Auf der ersten Zelle jeder Reihe nach der ersten.
5. Um Zellen zusammenzuführen, öffnen Sie die einer Zelle Optionen Tabulator und Set Spaltenspannweite oder Reihenspannweite.
6. Stil des Kopfes, des Körpers und der Streifen im Stil Tab, dann veröffentlichen.

Jede Zelle kann Text, ein Symbol oder ein Bild enthalten, und die Textfelder akzeptieren dynamische Tags. Responsive Tabelle? Im Abschnitt Einstellungen ist standardmäßig eingeschaltet, so wird auf Geräten mit einer Breite von bis zu 768 px jede Zeile zu einer Karte mit den Spaltennamen als Beschriftungen.

Möchten Sie es sehen, bevor Sie etwas installieren? Die Dynamische Tabellenseite Hat drei Live-Tische und acht Demo-Layouts, die Sie öffnen können.

Dynamic Table sortiert, sucht, paginiert oder importiert keine Dateien Jede Zelle wird von Hand getippt, was für 30 Zellen in Ordnung und für 300 ermüdend ist, also für Big-Data-Sets zurück zu Weg 3.

Fehler zu vermeiden

• Erstellen der Tabelle im Texteditor-Widget. Es hat keine Tabellenschaltfläche, sodass Sie am Ende sowieso HTML in die Textkarte schreiben. Das HTML-Widget ist der sauberere Ort für diesen Code.
• Verwendung eines Preis-Widgets für Daten. Preistabelle und Preistabelle Widgets werden für Pläne mit einem Kauf-Button erstellt. Sie sind die falsche Form für Datenzeilen.
• Telefone vergessen. Eine fünfspaltige Tabelle passt selten auf einen 390 px-Bildschirm Entscheiden Sie, ob Zeilen gestapelt, seitwärts gescrollt oder eine Spalte verloren werden sollen.
• Aufbau von 50 Zellen aus Widgets. Wenn die Grid-Methode mehr als etwa ein Dutzend Widgets benötigt, wechseln Sie zu einer echten Tabelle.

Häufig gestellte Fragen

Letzte Gedanken

Es gibt vier Möglichkeiten, eine Tabelle in Elementor zu erstellen Verwenden Sie das HTML-Widget für eine kleine Tabelle und kein Plugin, einen Grid-Container für einige Zellen mit Schaltflächen oder Bildern, TablePress für lange oder importierte Daten und ein Tabellen-Widget, wenn Sie die Tabelle im Elementor bearbeiten und stylen möchten.

Wenn der letzte passt, dann Dynamische Tabelle Teil ist Master-Addons Zusammen mit seinen anderen Widgets.

Verwandte Lektüre

• Tipps zur Elementarpreistabelle
• Beste Inhaltsverzeichnis Plugins für WordPress