Warum Sie Tabellen für Webseitenlayouts vermeiden sollten Avoid

Schreiben lernen CSS Layouts können schwierig sein, besonders wenn Sie mit Tabellen vertraut sind, um ausgefallene Webseiten-Layouts zu erstellen. Aber während HTML5 Tabellen für das Layout zulässt, ist dies keine gute Idee.

Tabellen sind nicht zugänglich

Ähnlich zu Suchmaschinen, lesen die meisten Screenreader Webseiten in der Reihenfolge, in der sie im HTML-Code angezeigt werden, und Tabellen können für Screenreader sehr schwer zu analysieren sein. Der Inhalt in einem Tabellenlayout ist zwar linear, aber nicht immer sinnvoll, wenn er von links nach rechts und von oben nach unten gelesen wird. Außerdem kann es bei verschachtelten Tabellen und verschiedenen Spannweiten in den Tabellenzellen dazu kommen, dass die Seite schwer zu erkennen ist.

Dies ist der Grund, warum die HTML5-Spezifikation empfiehlt dagegen Tabellen für Layout und warum HTML 4.01 dies verbietet. Barrierefreie Webseiten ermöglichen mehr Menschen die Nutzung und sind das Markenzeichen eines professionellen Designers.

watch instagram stories

Mit CSS können Sie einen Abschnitt als auf der linken Seite der Seite zugehörig definieren, ihn aber im HTML zuletzt platzieren. Dann lesen Screenreader und Suchmaschinen gleichermaßen die wichtigen Teile (den Inhalt) zuerst und die weniger wichtigen Teile (Navigation) zuletzt.

Tabellen sind knifflig

Selbst wenn Sie eine Tabelle mit einem Webeditor erstellen, bleiben Ihre Webseiten kompliziert und schwer zu pflegen. Abgesehen von den einfachsten Webseitendesigns erfordern die meisten Layouttabellen die Verwendung vieler Attribute und verschachtelter Tabellen.

Während Sie die Tabelle erstellen, mag es einfach erscheinen, aber wenn sie fertig ist, müssen Sie sie pflegen. Sechs Monate später ist es möglicherweise nicht mehr so ​​einfach, sich daran zu erinnern, warum Sie die Tabellen verschachtelt haben oder wie viele Zellen in einer Reihe waren und so weiter. Ganz zu schweigen davon, dass Sie, wenn Sie Webseiten als Teammitglied pflegen, allen Beteiligten erklären müssen, wie die Tabellen funktionieren oder dass sie zusätzliche Zeit benötigen, wenn sie Änderungen vornehmen müssen.

CSS kann auch kompliziert sein, aber es hält die Präsentation vom Inhalt getrennt und macht sie auf lange Sicht viel einfacher zu pflegen. Außerdem können Sie mit CSS-Layout eine CSS-Datei schreiben und alle Ihre Seiten so gestalten, dass sie so aussehen. Wenn Sie dann das Layout Ihrer Site ändern möchten, ändern Sie einfach eine CSS-Datei und das Ganze Site-Änderungen – nicht mehr jede Seite einzeln durchgehen, um die Tabellen zu aktualisieren, um die Layout.

Tabellen sind unflexibel

Obwohl es möglich ist, Tabellenlayouts mit prozentualen Breiten zu erstellen, sind sie oft langsamer zu laden und können das Aussehen Ihres Layouts dramatisch verändern. Wenn Sie jedoch bestimmte Breiten für Ihre Tabellen verwenden, erhalten Sie ein sehr starres Layout, das auf Monitoren mit einer anderen Größe als Ihrem nicht gut aussieht.

Das Erstellen flexibler Layouts, die auf vielen Monitoren, Browsern und Auflösungen gut aussehen, ist relativ einfach. Tatsächlich können Sie mit CSS-Medienabfragen separate Designs für Bildschirme unterschiedlicher Größe erstellen.

Tabellen schaden der Suchmaschinenoptimierung

Das am häufigsten in Tabellen erstellte Layout verwendet eine Navigationsleiste auf der linken Seite der Seite und den Hauptinhalt auf der rechten Seite. Bei der Verwendung von Tabellen erfordert dieser Ansatz (im Allgemeinen), dass der erste Inhalt, der im HTML angezeigt wird, die linke Navigationsleiste ist. Suchmaschinen kategorisieren Seiten basierend auf dem Inhalt, und viele Suchmaschinen stellen fest, dass der oben auf der Seite angezeigte Inhalt wichtiger ist als andere Inhalte. Eine Seite mit Linksnavigation zuerst scheint also Inhalte zu haben, die weniger wichtig sind als die Navigation.

Mit CSS können Sie den wichtigen Inhalt zuerst in Ihren HTML-Code einfügen und dann mit CSS bestimmen, wo er im Design platziert werden soll. Das bedeutet, dass Suchmaschinen den wichtigen Inhalt zuerst sehen, auch wenn das Design ihn weiter unten auf der Seite platziert.

Tabellen drucken nicht immer gut Print

Viele Tischdesigns lassen sich nicht gut drucken, weil sie für den Drucker einfach zu breit sind. Um sie passend zu machen, schneiden Browser die Tabellen ab und drucken Abschnitte darunter, was zu unzusammenhängenden Seiten führt. Manchmal haben Sie Seiten, die gut aussehen, aber die ganze rechte Seite fehlt. Auf anderen Seiten werden Abschnitte auf verschiedenen Blättern gedruckt.

Mit CSS können Sie ein separates Stylesheet nur zum Drucken der Seite erstellen.

Tabellen für das Layout sind in HTML 4.01 ungültig

Das HTML 4-Spezifikationsstaaten: "Tabellen sollten nicht nur zum Layouten von Dokumentinhalten verwendet werden, da dies beim Rendern auf nicht-visuelle Medien zu Problemen führen kann."

Wenn Sie also gültiges HTML 4.01 schreiben möchten, können Sie keine Tabellen für das Layout verwenden. Sie sollten Tabellen nur für tabellarische Daten verwenden, und tabellarische Daten sehen im Allgemeinen wie etwas aus, das Sie in einer Tabelle oder möglicherweise einer Datenbank anzeigen könnten.

HTML5 hat jedoch die Regeln geändert und Tabellen für das Layout gelten jetzt als gültiges HTML, obwohl sie nicht empfohlen werden. In der HTML5-Spezifikation heißt es: "Tabellen sollten nicht als Layouthilfen verwendet werden." Dies liegt daran, dass Tabellen für das Layout, wie bereits erwähnt, für Screenreader schwer zu unterscheiden sind.

Die Verwendung von CSS zum Positionieren und Layouten Ihrer Seiten ist die einzige gültige HTML 4.01-Methode, um die Designs zu erhalten, die Sie zum Erstellen von Tabellen verwendet haben, und HTML5 empfiehlt diese Methode ebenfalls dringend.

instagram story viewer