Das Schreiben von CSS-Layouts zu erlernen kann schwierig sein, insbesondere wenn Sie mit der Verwendung von Tabellen zum Erstellen ausgefallener Webseitenlayouts vertraut sind. HTML5 erlaubt zwar Tabellen für das Layout, ist aber keine gute Idee.
Tabellen sind nicht zugänglich
Genau wie Suchmaschinen lesen die meisten Bildschirmleser Webseiten in der Reihenfolge, in der sie im HTML-Format angezeigt werden. Tabellen können für Bildschirmleser sehr schwer zu analysieren sein. Dies liegt daran, dass der Inhalt eines Tabellenlayouts zwar linear ist, jedoch nicht immer sinnvoll ist, wenn er von links nach rechts und von oben nach unten gelesen wird. Außerdem können verschachtelte Tabellen und verschiedene Felder in den Tabellenzellen dazu führen, dass die Seite sehr schwer zu verstehen ist.
Aus diesem Grund empfiehlt die HTML5-Spezifikation, das Layout von Tabellen zu unterbinden, weshalb HTML 4.01 dies nicht zulässt. Zugängliche Webseiten ermöglichen die Nutzung durch mehr Personen und sind das Kennzeichen eines professionellen Designers.
Mit CSS können Sie einen Abschnitt als zugehörig auf der linken Seite der Seite definieren, aber als letzten Platz im HTML-Code einfügen. Dann lesen Bildschirmleser und Suchmaschinen zuerst die wichtigen Teile (den Inhalt) und die weniger wichtigen Teile (Navigation) zuletzt.
Tabellen sind knifflig
Selbst wenn Sie eine Tabelle mit einem Web-Editor erstellen, sind Ihre Webseiten immer noch sehr kompliziert und schwierig zu verwalten. Abgesehen von den einfachsten Webseitenentwürfen erfordern die meisten Layouttabellen die Verwendung vieler Attribute und von geschachtelten Tabellen.
Das Erstellen des Tisches scheint während der Ausführung einfach zu sein, aber wenn Sie fertig sind, müssen Sie ihn warten. Nach sechs Monaten ist es vielleicht nicht so leicht, sich daran zu erinnern, warum Sie die Tabellen verschachtelt haben oder wie viele Zellen in einer Reihe waren und so weiter. Wenn Sie Webseiten als Teammitglied pflegen, müssen Sie allen Beteiligten erklären, wie die Tabellen funktionieren, oder davon ausgehen, 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 HTML-Code getrennt und macht es auf lange Sicht viel einfacher zu pflegen. Außerdem können Sie mit dem CSS-Layout eine CSS-Datei schreiben und alle Ihre Seiten so gestalten, dass sie so aussehen. Wenn Sie das Layout Ihrer Site ändern möchten, ändern Sie einfach eine CSS-Datei, und die gesamte Site ändert sich - nicht mehr jede Seite einzeln durchgehen, um die Tabellen zu aktualisieren und das Layout zu aktualisieren.
Tabellen sind unflexibel
Es ist zwar möglich, Tabellenlayouts mit prozentualen Breiten zu erstellen, sie werden jedoch häufig langsamer geladen und können das Aussehen Ihres Layouts erheblich verändern. Wenn Sie jedoch für Ihre Tabellen bestimmte Breiten verwenden, erhalten Sie ein sehr starres Layout, das auf Monitore, die eine andere Größe als Ihre eigenen haben, nicht gut aussieht.
Das Erstellen flexibler Layouts, die auf vielen Monitoren, Browsern und Auflösungen gut aussehen, ist relativ einfach. Mit CSS-Medienabfragen können Sie sogar separate Designs für Bildschirme unterschiedlicher Größe erstellen.
Verschachtelte Tabellen laden langsamer als CSS für dasselbe Design
Die gebräuchlichste Methode zum Erstellen ausgefallener Layouts mit Tabellen besteht darin, Tabellen zu „verschachteln“. Dies bedeutet, dass eine (oder mehrere) Tabellen in eine andere eingefügt werden. Je mehr Tabellen verschachtelt sind, desto länger dauert es, bis der Webbrowser die Seite rendert.
In den meisten Fällen verwendet ein Tabellenlayout mehr Zeichen zum Erstellen als ein CSS-Entwurf. Und weniger Zeichen bedeuten weniger Download.
Tabellen können die Suchmaschinenoptimierung beeinträchtigen
Die am häufigsten erstellte Tabelle hat eine Navigationsleiste auf der linken Seite und den Hauptinhalt auf der rechten Seite. Bei der Verwendung von Tabellen muss (im Allgemeinen) der erste Inhalt, der im HTML-Code angezeigt wird, die linke Navigationsleiste sein. Suchmaschinen kategorisieren Seiten basierend auf dem Inhalt, und viele Suchmaschinen bestimmen, dass der oben auf der Seite angezeigte Inhalt wichtiger ist als der andere Inhalt. Eine Seite mit der linken Navigation erscheint also zunächst so, dass der Inhalt weniger wichtig ist 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. Dies bedeutet, dass Suchmaschinen den wichtigen Inhalt zuerst sehen, selbst wenn der Entwurf sie tiefer auf der Seite platziert.
Tabellen werden nicht immer gut gedruckt
Viele Tischdesigns drucken nicht gut, weil sie für den Drucker einfach zu breit sind. Damit sie anpassbar sind, werden die Tabellen von den Browsern abgeschnitten und die folgenden Abschnitte gedruckt, was zu sehr unzusammenhängenden Seiten führt. Manchmal erhalten Sie Seiten, die in Ordnung 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 erstellen, um die Seite zu drucken.
Tabellen für Layout sind in HTML 4.01 ungültig
In der HTML 4-Spezifikation heißt es: "Tabellen sollten nicht nur zur Gestaltung von Dokumentinhalten verwendet werden, da dies beim Rendern auf nicht visuelle Medien Probleme verursachen 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 Tabellendaten verwenden. Tabellendaten sehen im Allgemeinen so aus, als würden Sie sie in einer Tabelle oder möglicherweise in einer Datenbank anzeigen.
HTML5 hat jedoch die Regeln geändert. Tabellen, die nicht für das Layout empfohlen werden, gelten jetzt als gültiges HTML. Die HTML5-Spezifikation besagt: "Tabellen sollten nicht als Layouthilfe verwendet werden." Dies liegt daran, dass Layouttabellen, wie bereits erwähnt, für Bildschirmlesegeräte schwer zu unterscheiden sind.
Die Verwendung von CSS zum Positionieren und Layout Ihrer Seiten ist die einzige gültige Methode für HTML 4.01, mit der die von Ihnen zum Erstellen von Tabellen verwendeten Designs abgerufen werden können. HTML5 empfiehlt diese Methode ebenfalls dringend.
Tabellen für das Layout können sich auf Ihre Jobaussichten auswirken
Da immer mehr neue Designer HTML und CSS lernen, werden Ihre Fähigkeiten beim Erstellen von Tabellenlayouts immer geringer. Ja, es stimmt, dass Kunden normalerweise nicht die genaue Technologie angeben, die Sie zum Erstellen ihrer Webseiten verwenden sollten. Sie fordern jedoch Folgendes an:
- Zugängliche WebseitenEntwürfe, die von Bildschirmlesern angesehen werden können, werden von vielen Ländern vorgeschrieben, und Unternehmen finden die Zugänglichkeit von Tag zu Tag wichtiger.
- Wartungsfähige Webseiten: Designs, die sie mitnehmen können, auch wenn Sie sie in Zukunft nicht mehr warten wollen.
- Flexible Designs: Designs, die für viele Browser, Auflösungen und Geräte geeignet sind.
- Schnelles Herunterladen von Seiten: Geschwindigkeit wird sogar für SEO immer wichtiger.
- Druckbare Designs: Seiten, die ohne spezielle Skripts oder zusätzliche Seiten gedruckt werden.
Wenn Sie nicht das liefern können, wonach die Kunden verlangen, werden sie nicht mehr zu Ihnen kommen - für den Zeitraum. Können Sie sich wirklich leisten, dass Ihr Unternehmen darunter leidet, weil Sie nicht bereit sind, eine Technik zu erlernen und zu integrieren, die seit den späten 1990er Jahren verwendet wird?
The Moral: Lernen Sie, CSS zu verwenden
CSS ist zwar schwer zu erlernen, aber alles, was es wert ist, lohnt sich. Halten Sie Ihre Fähigkeiten nicht davon ab, zu stagnieren. Lernen Sie CSS und erstellen Sie Ihre Webseiten so, wie sie gebaut werden sollen - mit CSS für das Layout.
