FANDOM


Es gibt gerade bei der Verwendung von Wikitext viele verschiedene Möglichkeiten, das Aussehen von Seiten zu beeinflussen. Während das in der Desktop-Ansicht oft toll aussieht, kann es sein, dass diese Seiten auf mobilen Geräten nur bruchstückhaft angezeigt werden. Verschachtelte Tabellen sind hierbei ein Paradebeispiel.

Zur Erinnerung: Du kannst, wenn du den klassischen Editor verwendest, immer in der Vorschau eines Artikels überprüfen, ob der Inhalt auch auf einem mobilen Gerät korrekt angezeigt wird. Klicke hierbei auf „Vorschau“ und wähle im oberen linken Ausklapp-Menü „Mobile Geräte“ aus. Benutzt du den klassischen Editor nicht, so füge ?useskin=mercury an das Ende der URL an.

Was sind verschachtelte Tabellen?

Verschachtelte Tabellen sind einfach Tabellen, die in sich noch einmal Tabellen enthalten und die in sich noch einmal weitere Tabellen verbergen (auch bekannt als Tabellen-Inception!).

Hier haben wir ein Beispiel für verschachtelte Tabellen aus der Brave Frontier Community. Beachtet den Unterschied zwischen der Desktop-Ansicht und der mobilen Ansicht.
Desk Mob

Warum sind verschachtelte Tabellen schlecht?

Vermeide verschachtelte Tabellen wann immer es möglich ist. Generell können Tabellen sich sehr gut an die verschiedenen Auflösungen in ihrer Breite und Höhe anpassen, doch wenn eine Tabelle in einer anderen platziert wird, zwingt dies die Tabellenstruktur breiter werden zu lassen. Diesen Unterschied merkt man in der Desktopversion zwar nicht, doch in der mobilen Ansicht, auf der der Bildschirm viel viel kleiner ist, kann dies ausschlaggebend sein.

Das Ergebnis: Mobile Nutzer müssen eine Menge horizontal hin- und herscrollen (ein schlechtes Nutzererlebnis) und ein Großteil der eigentlichen Tabelle ist gar nicht erst zu sehen. Wenn eine verschachtelte Tabelle stattdessen in mehrere kleine, unabhängig voneinander stehende Tabellen zerlegt wird, kann der Leser hoch und runter scrollen.

Damit wird jede einzelne Table auch dynamischer. Die Anzeige des Inhaltes wird immer von der Größe des Displays bestimmt. Daher bewegt der Browser in der Desktopversion die Tabellen dort hin, wo Platz ist, um den Gesamtablauf des Scrollens zu verbessern.

Wenn deine Community verschachtelte Tabellen verwendet

Ermutige deine Community, verschachtelte Tabellen zu vermeiden und sorge für eine Inhaltsstruktur, die stattdessen einzelne Tabellen verwendet. Wie oben beschrieben kann man oft das gleiche Ergebnis erzielen, wenn man Tabellen einfach nebeneinander oder untereinander anordnet, statt sie ineinander zu verschachteln - und so aber die Nachteile vermeiden. Wenn der Inhalt am besten in ein Tabellenformat passt, kann man immer noch die Zellen in einer einzigen Tabelle so anpassen, dass es aussieht, als wäre es eine verschachtelte Tabelle.

Gute Taktiken, verschachtelte Tabellen zu vermeiden

Wie erkenne ich solche Tabellen?

In der Code-Ansicht beginnen Tabellen immer mit dem Wikitext {| oder dem HTML-Tag <table>. Tabellen werden mit einem Gegenstück auch geschlossen: |} oder </table>. Wenn du also den Beginn einer Tabelle siehst, den Inhalt der Tabelle verfolgst und vor deren Ende erneut auf einen Code wie {| oder <table> stößt, handelt es sich um eine Tabelle, die in einer anderen verschachtelt liegt. Tabellen können nicht nur einmal, sogar mehrere Ebenen tief verschachtelt sein.

Hier ist ein Quellcode-Beispiel einer verschachtelten Tabelle:
Example code 1024

Wie löse ich dieses Problem?

Der erste Schritt besteht darin, festzustellen, wie viele Tabellen ineinander verschachtelt wurden. Der zweite Schritt ist, die am tiefsten verschachtelte Tabelle zu finden und sie aus der Kette der anderen Tabellen herauszuziehen. Nun schau in der Vorschau, wie es aussieht, wenn diese Tabelle alleine steht. Danach kannst du weitere Parameter (nach dem Anfang mit {|) für diese Tabelle setzen.

Sobald alle internen Tabellen aus der Haupttabelle gezogen und für sich allein gestellt wurden, kannst du den Code für die ursprüngliche Tabelle löschen. Nun sollten alle Tabellen mobil-freundlich gestaltet sein.

Getrennte Tabellen in der Desktop-Ansicht

Tabellen sollten von oben nach unten oder nebeneinander auf einer Seite eingebunden werden. Dies ermöglicht dem Browser, die Tabellen auf dem Tablet oder Handy so anzuzeigen, dass sie in dem dafür verfügbaren Platz lesbar sind. Wenn die Tabellen nebeneinander angelegt sind, dann passen sie meist nicht in das mobile Display und der Browser drückt dann automatisch die letzte Tabelle nach unten.

Allerdings ist es eine der größten Herausforderungen, die Tabellen im Artikel so zu positionieren, dass sie sowohl in der Desktop-Ansicht als auch der mobilen Ansicht für den Leser angenehm dargestellt sind. Meistens erfordert dies eine CSS-Anpassung - doch diese wirkt sich hauptsächlich auf die Desktop-Ansicht aus und nicht auf die Ansicht auf mobilen Geräten. Falls du weitere individuelle Hilfe bei der Positionierung der Tabellen benötigst, so kannst du eine Liste von weiteren Tipps am unteren Ende dieses Artikels finden.

Weitere wichtige Informationen über verschachtelte Tabellen

Ganz wichtig: Wenn eine Vorlage benutzt worden, ist um eine Tabelle auf verschiedenen Seiten anzuzeigen, und man die verschachtelte Tabelle in der Vorlage ändert, dann wird die Tabelle auch auf den Mobilseiten, in denen die Vorlage eingebunden ist, optimal angezeigt. Man kann somit einen deutlich positiven Effekt für die Community erreichen, wenn man die Vorlagen optimiert.

Tabellen mit Bildern in einzelnen Zellen zwingen die Tabellenzelle, die Größe der Bilder anzunehmen. Daher sollten Bilder auf eine mobil-freundliche Größe angepasst werden oder ganz aus der Tabelle verschwinden. Wenn ein Bild außerhalb der Tabelle groß dargestellt wird, wird es automatisch für die mobile Ansicht verkleinert.

Die Brave Frontier Community als Beispiel

Die Brave Frontier Community war so nett, unser Versuchskaninchen zu spielen bei der Umwandlung ihrer verschachtelten Tabellen in einzelne Tabellen. Wir haben es geschafft, eine ihrer meistgenutzten Vorlagen (Die Charakter-Vorlage) von einer verschachtelten Tabelle in eine handy-freundlichere Version umzuwandeln und trotzdem deren Stil und Aussehen im Desktop-Browser beizubehalten. Das Ergebnis war ein deutlich verbessertes, mobil-freundliches Layout für sehr viele Artikel der Community. Schau selbst:


Wenn du mehr der technisch veranlagte Admin bist, kannst du dir die Veränderungen in der Code-Ansicht im Brave Frontier Wiki genauer ansehen:

Notiz: Dieser Code wurde geschützt, um unerwünschte Änderungen zu verhindern. Wenn du diese Vorlage für den Eigengebrauch übernehmen möchtest, kopiere bitte den Code in der Code-Ansicht und füge ihn in deinem Testwiki oder in deiner Community ein.

Siehe auch

Hilfe und Feedback

Nutzung von Community-Inhalten gemäß CC-BY-SA , sofern nicht anders angegeben.