So erstellen Sie responsive Tabellen in WordPress
Veröffentlicht: 2023-02-12Tabellen sind ein Website-Designelement, mit dem Sie große Mengen an Informationen elegant und organisiert darstellen können. Sie funktionieren recht gut auf herkömmlichen Computerbildschirmen, können aber auf mobilen Geräten oft ein unerwünschtes Erlebnis erzeugen.
Glücklicherweise gibt es mehrere praktikable Lösungen zum Erstellen reaktionsschnellerer Tabellen. Die Verwendung dieser responsiven Designpraktiken kann die Benutzererfahrung (UX) Ihrer Website verbessern. Dies bedeutet, dass Besucher die Daten in Ihren Tabellen einfacher anzeigen und darauf zugreifen können, unabhängig davon, welche Art von Gerät sie verwenden.
In diesem Artikel werfen wir einen Blick darauf, was es bedeutet, eine Tabelle responsiv zu machen. Wir werden dann zwei Möglichkeiten durchgehen, um responsive Tabellen in WordPress zu erstellen. Lass uns gleich eintauchen!
Was sind responsive Tabellen?
Typischerweise besteht das Ziel einer Tabelle darin, viele Daten sinnvoll darzustellen. Wenn Sie jedoch versuchen, Tabellen auf einem mobilen Gerät anzuzeigen, kann etwas schief gehen. Dies liegt daran, dass Tabellenzeilen oft viele Spalten breiter sind, als die Anzeige Ihres Bildschirms verarbeiten kann.
Wenn Sie eine responsive Tabelle erstellen, erstellen Sie im Wesentlichen eine Reihe von Regeln für Ihre ursprüngliche Datentabelle. Diese Regeln können Breakpoints basierend auf der Anzeigegröße bestimmen. Das bedeutet, wenn ein Benutzer auf die Tabelle auf einem Gerät zugreift, das kleiner als Ihr festgelegter Haltepunkt ist, reagiert das Tabellenlayout mit einer Neuformatierung, um es an die Bildschirmgröße anzupassen.
Responsive Tabellen können normalerweise neu formatiert werden, indem eine Bildlaufleiste hinzugefügt oder die Informationen gestapelt werden. Sie sollten die Informationen in den Zellen nicht einfach verkleinern und zusammenstopfen, wenn sich die Bildschirmgröße ändert, da dies die Tabelle unlesbar machen kann. Glücklicherweise ist Responsive Design nicht allzu schwer zu erreichen.
So erstellen Sie eine responsive Tabelle (ohne Plugin)
Es gibt im Wesentlichen zwei Ansätze, um eine Tabelle in WordPress responsive zu machen. Zuerst werfen wir einen Blick darauf, wie man die Arbeit ohne ein Plugin erledigt.
Dies erfordert einige Programmierkenntnisse: insbesondere ein Verständnis von Cascading Style Sheets (CSS). Wir empfehlen auch, in einer Staging- oder Entwicklungsumgebung zu arbeiten, anstatt auf Ihrer Live-Website, bis Sie eine Tabelle entwerfen, die zuverlässig funktioniert.
Schritt 1: Formatieren Sie Ihre Tabelle für Responsive CSS
In diesem Beispiel weisen wir die Daten unserer Beispieltabelle an, an einem bestimmten Haltepunkt neu zu formatieren. In einigen Fällen können Sie einer Tabelle einfach eine Bildlaufleiste hinzufügen, aber wir werden die Daten der Tabelle tatsächlich gruppieren, damit sie in einem besser lesbaren Format angezeigt werden, das horizontales Scrollen überflüssig macht.
Dies ist ein großartiger Ansatz, da horizontales Scrollen oft bedeuten kann, dass Sie die Daten einer Spalte ohne Kontext anzeigen:
Damit diese Tabelle besser funktioniert, müssen Sie zunächst sicherstellen, dass Ihre Tabelle richtig formatiert ist. Wenn Sie eine Tabelle mit dem Blockeditor erstellen, können Sie dies ganz normal tun und dann die Attribute <thead> und <tbody> hinzufügen, um sicherzustellen, dass Ihr CSS ordnungsgemäß funktioniert:
Sobald Sie die Tabelle hinzugefügt haben, können Sie ihre Formatierung mit dem HTML-Editor anpassen. Ihr Attribut <thead></thead> muss alle Ihre Spaltenüberschriften umschließen. Auf ähnliche Weise packen Sie alle nachfolgenden Tabellendaten in das Attribut <tbody></tbody> ein.
Nachdem Sie im nächsten Schritt das CSS-Tag hinzugefügt haben, können Ihre Stylesheets verstehen, was als Kopfzeilen für jede Spalte in der Tabelle angezeigt werden soll und was der Haupt- oder Zelleninhalt ist.
Schritt 2: Fügen Sie Ihrem CSS ein benutzerdefiniertes Tag hinzu
Als Nächstes verwenden wir einen Ausschnitt aus benutzerdefiniertem CSS-Code und das WordPress Twenty Nineteen-Design. Dieses Thema hat als Teil seines nativen Codes ein ziemlich ansprechendes Design, aber unsere CSS-Anpassungen werden das noch weiter gehen.
Da alle Themes unterschiedlich sind, solltest du die Struktur deines Themes gründlich verstehen, um erfolgreich ein ansprechendes Tabellendesign zu implementieren. Einige Designs erfordern möglicherweise eine zusätzliche JavaScript-Bibliothek.
Für unser Beispiel navigieren wir zu Appearance > Customize > Additional CSS , wo wir den folgenden benutzerdefinierten CSS-Code hinzufügen können:
@media screen and (max-width: 600px) { | |
table {width:100%;} | |
thead {display: none;} | |
tr:nth-of-type(2n) {background-color: inherit;} | |
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;} | |
tbody td {display: block; text-align:center;} | |
tbody td:before { | |
content: attr(data-th); | |
display: block; | |
text-align:center; | |
} | |
} |
Nachdem Sie Ihren eigenen Code in den Editor eingefügt haben, müssen Sie Veröffentlichen auswählen, damit Ihre Änderungen wirksam werden.
Schritt 3: Testen Sie die Reaktionsfähigkeit der Tabelle in WordPress
WordPress verfügt über eine hilfreiche integrierte Bildschirmtestfunktion, mit der Sie Ihre Inhalte auf drei verschiedenen Bildschirmgrößen testen können. Am unteren Rand des Bildschirms, auf dem Sie Ihr benutzerdefiniertes CSS hinzugefügt haben, können Sie auf die Tablet- oder Mobiltelefonsymbole klicken, um den neuen Stil Ihrer Tabelle zu testen:
Für dieses Beispiel haben wir bereits eine einfache Tabelle erstellt, die alle notwendigen HTML-Attribute enthält, um mit unserem CSS zu arbeiten. Unser Haltepunkt im CSS ist auf 600 Pixel eingestellt, aber das kann an Ihre Bedürfnisse angepasst werden.
Anstatt eine Bildlaufleiste hinzuzufügen oder die Daten der Tabelle zu quetschen, reorganisiert das von uns hinzugefügte CSS die Daten in einem mobilfreundlichen Format. Dadurch kann der Benutzer auf einem mobilen Gerät vertikal scrollen und die Daten der Tabelle im Kontext mit den restlichen zugehörigen Zellen anzeigen.
So erstellen Sie eine responsive Tabelle mit einem Plugin
Wenn Sie den Code oder das CSS Ihres Designs nicht anpassen möchten, gibt es eine andere Option. Es gibt eine Reihe von WordPress-Plugins, mit denen Sie ein ansprechendes Tabellendesign für Ihre Website erstellen können.
Schritt 1: Laden Sie ein Plugin herunter
Um zu beginnen, müssen Sie ein Plugin auswählen. Da es einige Optionen zum Entwerfen von reaktionsschnellen Tabellen gibt, werden wir einige hervorheben, um Ihnen den Einstieg zu erleichtern:
- Ninja Tables : Als WordPress-Plugin Nummer eins zum Erstellen von reaktionsschnellen Tabellen bezeichnet, bietet es über 100 Tabellenstile zur Auswahl.
- wpDataTables : Dies ist ein kostenloses Plugin mit einer Premium-Version, aber die Lite-Version ist vollgepackt mit Funktionen zum Erstellen reichhaltiger und interaktiver Tabellen und Diagramme.
- WP Responsive Table : Dies ist ein einfaches und kostenloses Plugin, das es einfach macht, responsive Tabellen zu erstellen, die auf kleinen Bildschirmen horizontal scrollen.
Für den Rest dieses Beispiels verwenden wir Ninja Tables, um zu demonstrieren, wie man eine responsive Datentabelle in WordPress erstellt.
Schritt 2: Geben Sie Ihre Daten ein
Nachdem Sie das Plugin installiert und aktiviert haben, können Sie direkt mit dem Erstellen einer Tabelle beginnen. Sie können zu NinjaTables > All Tables > Add Table navigieren:
Hier können Sie eine neue Tabelle von Grund auf neu hinzufügen oder eine Tabelle aus einer Datei importieren . Wir werden mit der Option Tabelle hinzufügen eine Tabelle von Grund auf neu erstellen. Anschließend müssen Sie einen Titel und eine Beschreibung für Ihre Tabelle eingeben:
Sie haben hier auch einige andere Optionen. Wenn Sie beispielsweise einen WooCommerce-Shop einrichten, können Sie diese Informationen verwenden, um eine WooCommerce-Tabelle zu erstellen.
Nachdem Sie Ihre Informationen hinzugefügt haben, klicken Sie auf Hinzufügen , um die Tabelle zu erstellen. Sie müssen dann mit der Eingabe von Daten beginnen. Sie können Spalte hinzufügen auswählen, um die Struktur Ihrer Tabelle einzurichten:
Sie müssen einige Felder ausfüllen, um Ihre Spalte zu erstellen. Dazu gehören der Kopfzeilenname der Spalte und der darin enthaltene Datentyp. Sie können auch den Responsive Breakpoint festlegen:
Um aus einer Reihe von Optionen auszuwählen, die bestimmen, wie Ihre Tische auf verschiedene Geräte reagieren, können Sie auf das Menü zugreifen, indem Sie auf Immer auf allen Geräten anzeigen klicken:
Nachdem Sie Ihre Spalten erstellt haben, wählen Sie Daten hinzufügen aus, und NinjaTables stellt Ihnen ein einfaches Formular zur Verfügung, mit dem Sie schnell mehrere Einträge zur Tabelle hinzufügen können:
Sie können die Option Hinzufügen fortsetzen aktiviert lassen, wenn Sie mehrere Einträge vornehmen müssen. Sobald Sie fertig sind, können Sie das Fenster schließen und zu Ihrem Tabellenbearbeitungsbildschirm zurückkehren.
Schritt 3: Formatieren Sie Ihre Tabelle
Nachdem Sie nun eine Tabelle mit Informationen haben, können Sie die Einstellungen und Stiloptionen von NinjaTable erkunden. Von Ihrem Tabellenbearbeitungsfenster aus können Sie über die oberen Registerkarten und auch auf der rechten Seite des Bildschirms auf weitere Einstellungen zugreifen:
Sie haben viele Optionen zum Anpassen des Stils und Erscheinungsbilds Ihrer Tabelle, einschließlich abwechselnder Tabellenzeilenfarben, Zentrieren von Text, Ausblenden von Daten und mehr.
Schritt 4: Testen Sie Ihre Tabelle
NinjaTable macht es einfach, die Reaktionsfähigkeit Ihrer Tabelle zu testen, während Sie sie bearbeiten. Auf der Registerkarte Tabellendesign finden Sie drei Optionen zum Testen der Bildschirmreaktion:
Sie können Desktop , Tablet oder Mobil auswählen, um anzuzeigen, wie Ihre Tabelle auf diesen Geräten aussehen würde.
Jede Tabelle, die Sie erstellen, enthält auch einen Shortcode. Außerdem können Sie ganz einfach jede Ihrer Tabellen zum Inhalt Ihrer Website hinzufügen, indem Sie den NinjaTable-Block verwenden, den Sie im Abschnitt „ Formatierung “ des Menüs „Block-Editor“ finden.
Lassen Sie sich von WP Engine dabei helfen, Ihre Website reaktionsfähig zu halten
Das Erstellen einer Website mit solidem responsivem Design muss keine Herausforderung sein, wenn Sie Zugriff auf die richtigen Ressourcen haben.
Hier bei WP Engine möchten wir, dass Sie Ihren Kunden das beste digitale Erlebnis bieten können. Sehen Sie sich unsere vielen WordPress-Hosting-Pläne und Entwicklerlösungen für Ihr nächstes Projekt an!