fbpx

Responsive Tabelle für WordPress

Die mobile Darstellung der Webseite ist von immer größerer Bedeutung. Nicht zuletzt dadurch, dass Google die mobile Optimierung einer Webseite immer mehr in das Ranking einfließen lässt, ist eine auf kleine Bildschirme optimierte Ansicht unausweichlich.

Die perfekte Darstellung von Tabellen gehört definitiv dazu. Aus diesem Grund stelle ich in EAPI PLUS eine auf mobile Geräte optimierte Darstellungsmöglichkeit zur Verfügung.

Besonderer Vorteil: Die Verwendung ist kinderleicht und dennoch elegant. Es kann der normale HTML-Syntax verwendet werden. Die mobile Darstellung wird ausschließlich durch ein oder mehrere angehängte Klassen aufgerufen. Mit einem Beispiel lässt sich das ganze am einfachsten erklären.

So sieht eine mögliche Vergleichstabelle aus:

Name Dyon Enter 24 Pro Thomson 32HC3106 Techwood H32T11A  Hisense H32NEC2000S
Maße 24 Zoll  32 Zoll  32 Zoll  32 Zoll
Besonderheit
  • LED Fernseher
  • Triple Tuner
  • Energieeffizienz: A
  •  Triple Tuner
  • Digitaler Audioausgang; SCART; USB; HDM
  •  HD Ultra Contrast
  • Energieklasse: A+
  • LED-Backlight Fernseher
  • Auflösung: 1.280 x 720 Pixel
Produktbewertungen
Bild Dyon Enter 24 Pro 60,96 cm (24 Zoll) LED Fernseher (Triple Tuner) Thomson 32HC3106 81 cm (32 Zoll) Fernseher (HD Ready, Triple-Tuner) Techwood H32T11A 81 cm (32 Zoll) Fernseher (HD Ready, Triple Tuner) Hisense H32NEC2000S 80 cm (32 Zoll) Fernseher (HD Ready, Triple Tuner)
Preis (Nicht verfügbar) 187,07 € 169,99 € 164,52 €
Shop Amazon Amazon Amazon Amazon

(Um sehen zu können wie die Tabelle auf einem mobilen Endgerät aussieht, müssen Sie diese Seite natürlich auf Ihrem Smartphone aufrufen. Alternativ können Sie auch den mobilen Emulator von Chrome oder Firefox verwenden.)

EAPI responsive TabelleDie Ausgabe sieht in diesem Fall so aus (Screenshot). Auf dem Screenshot können Sie die Navigationsfunktion der Tabelle nicht testen. Dafür müssen Sie die Seite auf einem mobile Gerät öffnen (Oder den zuvor erwähnten Emulator von Chrome oder Firefox verwenden.)

Aufruf der responsiven Tabelle

Der Aufruf der Tabelle ist sehr einfach gestaltet. Es reicht eine CSS-Klasse an das Tabellen HTML-Element zu hängen. Die Klasse heißt eapi__nice.

Beispiel:

<table class="eapi__nice">

<tr><td>[..].</td></tr>

</table>

Sie können die Tabelle also ganz normal mit dem Editor von WordPress erstellen. Sie haben die Möglichkeit zunächst beliebig viele Spalten und Zeilen festzulegen. Anschließend wechseln Sie in die HTML-Ansicht.

HTMl Text bearbeitenDort können Sie im HTML-Text nach der Stelle suchen an der die Tabelle steht. Im HTML-Text fügen Sie wie im oben beschriebenen Beispiel die Klasse im Quelltext dazu. Mehrere Klassen werden mit Leerzeichen getrennt.

Das reicht aus: Die Tabelle wird jetzt für die mobile Ansicht optimiert.

Welche Einstellungen stehen zur Verfügung?

Weitere Einstellungen zur Darstellung können über Klassen im Quelltext definiert werden.

  1. class=“eapi__nice“: Die Tabelle wird responsive dargestellt.
  2. class=“eapi__nice eapi__cta“: Der Button (Call-To-Action) erscheint immer im Blickfeld des Nutzers. So ergibt sich eine höhere Klickrate zu Amazon.
  3. class=“eapi__nice eapi__first-line“: Die erste Spalte der Tabelle wird als Überschrift interpretiert. Am obigen Beispiel sind das die Felder: Name, Maße, Besonderheit, Produktbewertungen, Bild, Preis und Shop.

Problem bei der Darstellung?

In seltenen Fällen gibt es Komplikationen mit verwendeten Themes. Kontaktieren Sie mich in diesem Fall. So kann ich sagen wie die Darstellung korrigiert werden kann.

Die responsiven Tabellen für WordPress können mit EAPI PLUS genutzt werden.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.