Fandom

Wikia Deutschland

Wikia-Universität - Verschachtelte Tabellen vermeiden

2.422Seiten in
diesem Wiki
Seite hinzufügen
Diskussion0

Störung durch Adblocker erkannt!


Wikia ist eine gebührenfreie Seite, die sich durch Werbung finanziert. Benutzer, die Adblocker einsetzen, haben eine modifizierte Ansicht der Seite.

Wikia ist nicht verfügbar, wenn du weitere Modifikationen in dem Adblocker-Programm gemacht hast. Wenn du sie entfernst, dann wird die Seite ohne Probleme geladen.

Beschreibung Bearbeiten

Willkommen zur Wikia-Universität. Deiner offiziellen Quelle für Wissen rund um Wikia-Communitys.

In diesem Video sehen wir uns die Verwendung von verschachtelten Tabellen an, sprechen darüber, warum man sie vermeiden sollte und zeigen Alternativen auf.

Doch zunächst einmal die Frage: „Was sind verschachtelte Tabellen überhaupt?“ Im Prinzip ist jede Tabelle innerhalb einer anderen Tabelle eine verschachtelte Tabelle. Auf diesem Bild siehst du ein Beispiel für eine verschachtelte Tabelle und wie sie auf einem großen Desktop-Monitor dargestellt wird. Die komplette Seite ist praktisch eine einzige Tabelle, in der weitere Tabellen verschachtelt sind.

Auf einem großen Bildschirm kann die Seite auch noch gut dargestellt werden. Auf kleineren Displays, wie bspw. auf einem Smartphone, wie auf diesem Bild, wird die Tabelle jedoch schnell unübersichtlich und die enthaltenen Informationen können, wenn überhaupt, erst durch viel Scrollen und Wischen erreicht werden.

Die Tabelle auf diesem Bild ragt zum Beispiel über den rechten Rand hinaus, weil sie zu breit ist. Das Mobilgerät weiß nicht, wie es diese besonders breite Tabelle anzeigen soll und stellt deshalb nur einen Teil dar. Warum passiert das? Wenn sich eine Tabelle innerhalb einer anderen Tabelle befindet, versucht die Tabellenzelle der äußeren Tabelle, die innenliegende Tabelle noch irgendwie unterzukriegen. In diesem Fall wird die Tabelle also dazu gezwungen, sich über den zur Verfügung stehenden Platz hinaus auszuweiten.

Was genau kannst du nun tun, um dies zu verhindern? Am besten verwendest du nur eine einzige Tabelle, die dieselben Informationen wie zuvor enthält, und auf Desktopbildschirmen und Smartphone-Displays gleichermaßen gut zu lesen ist. Solltest du wirklich mehr als eine Tabelle benötigen, versuche sie nach Möglichkeit nicht zu sehr zu verschachteln, sondern die Tabellen unabhängig voneinander zu entwerfen und positionieren. Das erlaubt dem Browser, den zur Verfügung stehenden Platz ganz einer Tabelle zu widmen. Dazu kommt, dass im mobilen Browser die Tabellen nun getrennt übereinander angezeigt werden und besser dargestellt werden können.

Schauen wir uns also unsere Beispielseite mit den nun überarbeiteten Tabellen noch einmal an. Hier siehst du die Desktopversion: Aufgeräumt, einfach zu lesen und dieselben Informationen wie zuvor in einer kompakten Ansicht. Im großen und ganzen hat sich das Design nicht verändert.

Und auf diesem Bild siehst du die überarbeitete Seite in der mobilen Version. Kompakte, übersichtliche Informationen, die nicht erst durch übermäßiges horizontales Scrollen und Wischen, sondern über den normalen vertikalen Lesefluss erreicht werden.

Heute haben wir uns angesehen, was genau verschachtelte Tabellen sind und weshalb es wichtig ist, auf diese nach Möglichkeit zu verzichten. Deinen Lesern solltest du das Lesen deiner Inhalte auf allen Plattformen so einfach und unkompliziert wie möglich gestalten. Eher einfach gestaltete Tabellen helfen dir dabei, dieses Ziel zu erreichen.

Wird in diesen Seiten verwendet
von

Komplette Liste anzeigen >

Dateiversionen

Klicke auf einen Zeitpunkt, um diese Version zu laden.

Version vomVorschaubildMaßeBenutzerKommentar
aktuell14:13, 22. Mär. 2016Vorschaubild der Version vom 22. März 2016, 14:13 Uhr03:051.920 × 1.079 (1,85 MB)ElBossocreated video

Metadaten

Auch bei Fandom

Zufälliges Wiki