So erstellen Sie eine Vergleichstabelle in WordPress mit Ninja Tables

Letzte Woche musste ich mit WordPress eine Vergleichstabelle erstellen, um einige Daten zu präsentieren. Anfangs konnte ich in WordPress nichts Passendes finden, um eine interaktive Tabelle zu erstellen, die reagiert. Wenn ich eine Tabelle erstellen müsste, hätte ich sie vollständig in HTML mit zahlreichen <TABLE>-, <TR>-, <TD>-Tags codieren müssen. Als Beispiel würde der Code hinter einer Beispieltabelle so aussehen:

Die Tabelle:

Der Code hinter der Tabelle:

<TABLE BORDER=“5″ WIDTH=“50%“ CELLPADDING=“4″ CELLSPACING=“3″>

<TR>
<TH COLSPAN=”2″><BR><H3>TABELLENTITEL</H3>
</TH>
</TR>
<TR>
<TH>Spalte A</TH>
<TH>Spalte B</TH>
</TR>
<TR ALIGN="CENTER">
<TD>Daten 1</TD>
<TD>Daten 2</TD>
</TR>
</TABLE>

Dies ist jedoch kein praktischer Ansatz. Jedes Mal, wenn ich beabsichtige, eine Tabelle zu erstellen, wird es so viel Zeit und Mühe in Anspruch nehmen, was eindeutig ein unnötiger Aufwand ist. Und da ich mit einem komplexen Prozess der Vergleichstabelle zu tun hatte, dachte ich daran, ihn intelligenter zu handhaben. Also habe ich beschlossen, mir verschiedene WordPress-Plugins zu diesem Thema anzusehen.

Ich habe mehrere Plugins gefunden, die das Problem lösen können, aber mit ein oder zwei großen Einschränkungen; außer einem. Bevor ich über dieses spezielle Plugin spreche, möchte ich auf die Hauptprobleme eingehen, die ich beim Studium verschiedener Tabellen-Plugins für WordPress gefunden habe.

Der unbequeme Rückschlag, den ich bei fast jedem Plugin festgestellt habe, ist, dass die mit diesen Plugins erstellten Tabellen lediglich reaktionsschnell sind und nicht mit allen Arten von Geräten kompatibel sind. Das Gute ist, dass ich das Ninja Tables-Plugin gefunden habe, das wirklich reaktionsschnell war und mir geholfen hat, sehr schnell einen schönen, interaktiven Tisch zu erstellen.

Ein Vergleich ist eine der härtesten Aktivitäten, die Benutzer im Internet durchführen. In den meisten Fällen ist es ein offensichtlicher Schritt, den Ihre Besucher jedes Mal unternehmen, bevor sie ein Produkt kaufen, sich für eine Mitgliedschaft anmelden oder ein Angebot anfordern. Und hier kommen Vergleichstabellen ins Spiel, die uns das Leben etwas erleichtern, indem sie eine große Datenmenge visuell darstellen.

Für geschäftliche Zwecke können zwei Arten von Vergleichstabellen erstellt werden. Eine ist eine statische Vergleichstabelle und die andere ist dynamisch. Dynamische Vergleichstabellen sind geeigneter und interaktiver, was für ein gesundes Geschäftsumfeld angemessen ist. Es ermöglicht Benutzern, direkt mit den gewünschten Diensten zu interagieren.

Andererseits dienen statische Vergleichstabellen keinem anderen Zweck, als nur das Produkt als Ganzes zu bewerben. Der Benutzer kann mit dieser Art von Tabelle nicht interagieren und keine sofortige Aktion ausführen. Und dies könnte Ihrem Website-Publikum wie eine schlechte Benutzererfahrung erscheinen.

Erstellen einer Vergleichstabelle mit Ninja Tables: Eine Schritt-für-Schritt-Anleitung

Inspiriert, interaktive Vergleichstabellen zu erstellen, ohne viel Zeit zu verschwenden? In dieser Phase werde ich Sie durch eine Schritt-für-Schritt-Anleitung führen, wie Sie eine responsive und dynamische Vergleichstabelle für Ihr Unternehmen erstellen können. Werfen wir einen Blick.

Zum Beispiel gebe ich eine Preisliste eines Webhosting-Dienstleisters an. Diese Tabelle zeigt Ihnen, wie das Unternehmen mit seinen Kunden interagiert, indem Sie einfach die unten angegebene Preistabelle anzeigen.

Ich habe die Tabelle einfach mit dem Ninja Tables Plugin erstellt. Am wichtigsten ist, dass es reaktionsschnell ist. Sie können die Reaktionsfähigkeit überprüfen, indem Sie einfach die Größe Ihres Browserfensters ändern, um einen schnellen Überblick zu haben, wenn Sie von einem Desktop oder Laptop aus surfen.

Jetzt zeige ich Ihnen, wie Sie als WordPress-Website-Administrator oder Redakteur solche interaktiven Tabellen in WordPress erstellen können.

Schritt 1:

Zunächst müssen Sie das Ninja Tables-Plugin herunterladen und installieren. Für detailliertes Know-how zum Installationsprozess: [readme] .

Schritt 2:

Nachdem Sie Ninja Tables aktiviert haben, klicken Sie einfach auf „ Ninja Tables “, um den Betrieb zu starten. Dann erscheint eine Seite mit der Schaltfläche „ Tabelle hinzufügen “.

Schritt 3:

Durch Klicken auf die Schaltfläche „ Tabelle hinzufügen “ wird ein Dialogfeld geöffnet, das die notwendigen Informationen enthält, die zum Erstellen einer Tabelle ausgefüllt werden müssen. Klicken Sie nach dem Ausfüllen des Formulars auf die Schaltfläche „Hinzufügen“. Dann wird eine Tabelle mit ihren Spaltenoptionen erstellt.

Schritt 4:

Es öffnet sich dynamisch eine Seite mit einem Formular zum Ausfüllen der erforderlichen Informationen zu den Spalten unter der jeweiligen Tabelle. Jedes Formular repräsentiert eine Spalte dieser Tabelle. Nachdem Sie ein Formular ausgefüllt haben, klicken Sie auf die Schaltfläche „Spalte hinzufügen“, um zur nächsten Spalte zu gelangen.

Eine Spalte mit dem Namen Plan 1 wird unter der Hosting-Service-Tabelle erstellt. Wir können auf die Schaltfläche „ Spalte hinzufügen“ klicken, um weitere Spalten zur Tabelle hinzuzufügen.

Schritt 5:

Auf diese Weise können Sie der Tabelle weitere Spalten hinzufügen. Die Schnittstelle sieht so aus, wenn Sie eine weitere hinzufügen.

Schritt 6:

Jetzt müssen Sie Daten in den Zellen dieser Tabelle hinzufügen. Klicken Sie dazu auf die Option „ Tabellenzeilen “, dann haben Sie eine Seite mit der Schaltfläche „ Daten hinzufügen “. Klicken Sie auf diese Schaltfläche, um den Spalten Zeile für Zeile bestimmte Daten hinzuzufügen.

Ein Dialogfeld wird angezeigt, um die erforderlichen Informationen für die Spalte einzugeben.

Es erscheint eine Dialogbox mit einem Eingabeformular, um Daten in die Tabelle einzutragen.

Schritt 7:

Nachdem Sie das Formular ausgefüllt haben, klicken Sie einfach auf die Schaltfläche „ Hinzufügen “, um alle angegebenen Daten in einer Reihe hinzuzufügen. Sie können Daten bearbeiten, löschen und weitere Daten hinzufügen, indem Sie auf das entsprechende Symbol klicken. Fügen Sie auf diese Weise weitere Daten hinzu und erhöhen Sie die Zeile. Die Schnittstelle wird dann so sein.

Schritt 8:

Jetzt fügen wir auf die gleiche Weise zehn weitere Datenspalten in die Tabelle ein und können unsere angegebenen Daten bearbeiten, indem wir auf die Schaltfläche „Aktualisieren“ klicken. Shortcode kann durch Klicken auf die Textschaltfläche verwendet werden, um einen bestimmten Artikel anzupassen. Wir werden einige Daten ändern, indem wir ein anderes Farbschema verwenden. Klicken Sie dann auf die Schaltfläche „Aktualisieren“.

Die Vorschau dieser Schnittstelle wird so aussehen. Es scheint ziemlich cool anzusehen. So können wir eine grundlegende Tabellenstruktur erstellen.

So habe ich die Vergleichstabelle als Ganzes erstellt. In diesem Artikel wollte ich klarstellen, dass in WordPress jeder mit Hilfe des richtigen Plugins eine schwere Aufgabe sehr reibungslos erledigen kann. In diesem Artikel habe ich beispielhaft gezeigt, wie das Plugin Ninja Tables die Dinge einfach macht. Es machte meine Aufgabe sehr glatt und bequem. Am wichtigsten ist, dass dieses Plugin auf dem Markt vollständig reaktionsschnell ist.