In den Anfängen der Website-Erstellung, Tabellen wurden in erster Linie für die Anzeige auf dem Desktop entwickelt, wo viel Platz auf dem Bildschirm zur Verfügung stand. Als Websites immer mehr komplexe Daten enthielten, wurden Tabellen zu einem beliebten Mittel, um große Mengen an Informationen übersichtlich zu organisieren.
Mit der zunehmenden Nutzung von Mobiltelefonen wurde der Bedarf an responsiven Tabellen unabdingbar. Immer mehr Nutzer griffen auf Websites über Telefone und Tablets zu, wo herkömmliche Tabellen zu Frustration führten, weil man horizontal scrollen oder zoomen musste, um den Inhalt zu lesen.
Heutzutage geht es bei responsiven Tabellen nicht nur um Bequemlichkeit, sondern sie sind für SEO und Barrierefreiheit unerlässlich, insbesondere bei Googles Mobile-First-Indexierung. Da der Standard-Tabellenblock von WordPress nicht über eine integrierte Reaktionsfähigkeit verfügt, benötigen Sie Methoden wie CSS-Anpassungen oder Plugins, um dieses Problem zu lösen.
In dieser Anleitung zeigen wir Ihnen, wie Sie mit einem Plugin auf einfachste Weise mobiloptimierte Tabellen in WordPress erstellen können.
Schritt 1: Installieren und aktivieren Sie das Tableberg-Plugin
Der erste Schritt ist einfach. Gehen Sie zu Ihrem WordPress Dashboard und navigieren Sie zu Plugins > Neu hinzufügen. Sobald Sie dort sind, geben Sie ein Tischberg und suchen Sie das Plugin. Sobald Sie es gefunden haben, klicken Sie auf Jetzt installieren. Nach der Installation müssen Sie nur noch Aktivieren Sie es. Klicken Sie auf Aktivieren, um das Plugin auf Ihrer Website zu aktivieren.
Schritt 2: Erstellen einer neuen Tabelle mit Tableberg
Klicken Sie in Ihrem WordPress-Editor auf die Schaltfläche Plus-Symbol (+), suchen Sie nach Tischbergund fügen Sie dann den Tableberg-Block hinzu.
Wählen Sie die Anzahl der Zeilen und Spalten für Ihre Tabelle und klicken Sie dann auf die Schaltfläche Erstellen. Für dieses Tutorial haben wir eine Tabelle mit 4 Zeilen und 5 Spalten gewählt.
Schritt 3: Hinzufügen von Daten zu Ihrer Tabelle
Nach Erstellung Ihrer Tabellewerden Sie zum Tabelleneditor weitergeleitet, wo Sie jeder Zelle Inhalte hinzufügen können. Klicken Sie auf eine beliebige Zelle, tippen Sie auf die Schaltfläche Pluszeichen (+), Geben Sie den gewünschten Block ein und fahren Sie mit der Eingabe von Text, Bildern, Listen, Sternebewertungen, Schaltflächen oder anderen Elementen fort, die Ihren Anforderungen entsprechen.
Schritt 4: Aktivieren Sie die responsiven Einstellungen
Um sicherzustellen, dass Ihre Tabelle auf allen Geräten gut angezeigt wird, bietet Tableberg eine strukturierte Reaktionsfähigkeit Einstellungen Abschnitt. Wählen Sie zunächst die übergeordneter Block, gehen Sie zum Einstellungen auf der rechten Seite des Editors, und scrollen Sie dann nach unten, um das Feld Reaktionsfähigkeit Einstellungen.
Wählen Sie dann das Gerät aus, für das Sie die Reaktionsfähigkeit konfigurieren möchten. Oben im Bereich Reaktionsfähigkeitseinstellungen sehen Sie Optionen für Schreibtisch, Tabletteund Mobil. Wählen Sie das Gerät aus, das Sie anpassen möchten, da dies bestimmt, wie sich die Tabelle auf dieser bestimmten Bildschirmgröße verhält. Hier haben wir Mobile ausgewählt.
Wenn das Gerät ausgewählt ist, schalten Sie die Option Haltepunkt einschalten um das responsive Verhalten für das gewählte Gerät zu aktivieren. Diese Einstellung ermöglicht es der Tabelle, responsive Anpassungen vorzunehmen, wenn die Bildschirmbreite bei oder unter dem Wert liegt, den Sie in Maximale Breite. Wenn Sie beispielsweise die maximale Breite auf 1024 Pixel einstellen, wird die Tabelle auf Bildschirmen, die schmaler als 1024 Pixel sind, entsprechend angepasst. Unterhalb dieser Einstellung finden Sie die Option Make Obere Zeile Kopfzeile die die erste Zeile Ihrer Tabelle als Kopfzeile kennzeichnet und bestimmte Stile oder Formatierungen anwendet, um sie von den anderen Zeilen zu unterscheiden.
Verwenden Sie schließlich die Modus können Sie festlegen, wie sich die Tabelle auf kleineren Bildschirmen verhält. Sie können wählen Schriftrolle um den horizontalen Bildlauf zu aktivieren und den Nutzern die Möglichkeit zu geben, durch die Tabelle zu streichen, wenn sie zu breit ist. Wählen Sie alternativ Stapel um den Tabelleninhalt vertikal neu anzuordnen. Wenn Sie den Stapelmodus verwenden, können Sie zusätzliche Optionen wie Richtung des Stapels können Sie die Stapelrichtung steuern, und Posten pro Zeile können Sie festlegen, wie viele Elemente pro Zeile angezeigt werden sollen, um eine bessere Anpassung an kleinere Bildschirme zu ermöglichen.
Das war's - Ihre Tabelle ist fertig und kann auf Bildschirmen jeder Größe glänzen. Veröffentlichen Sie sie, und lassen Sie Ihre Daten reibungslos über Desktops, Tablets und Telefone fließen!
Schlussfolgerung
Responsive Tabellen sind nicht nur ein Feature - sie sind ein Muss in der heutigen WordPress-Welt. Mit Tableberg haben Sie herkömmliche Tabellen in etwas verwandelt, das sich an jeden Bildschirm anpasst, flexibel ist und auf jedem Bildschirm glänzt. Ihre Website bietet nun eine übersichtlichere, leichter zugängliche Möglichkeit, Daten zu präsentieren, egal ob sie auf einem Desktop, einem Tablet oder einem Telefon angezeigt werden. Verabschieden Sie sich von klobigen Displays und begrüßen Sie eine Benutzererfahrung, die genauso reibungslos funktioniert wie Ihre Inhalte. Ihr Publikum wird von dem Upgrade begeistert sein, und die Suchmaschinen werden es auch sein.
