Tabellenbasierte Designs Vs. CSS-Designs

November 5

Tabellenbasierte Designs Vs. CSS-Designs

Den ersten Web-Seiten im Internet, die kaum mehr als Text und Hyperlinks enthalten. Als das Internet Popularität jedoch wuchs outgrew Webdesign, die aktuelle HTML-Standards und die Möglichkeiten der verfügbaren Browser. Designer brauchte eine Möglichkeit komplizierte Web-Designs erstellen, die Internet Explorer und Netscape-Browsern die gleiche Weise anzeigen würde. Aus dieser Notwendigkeit heraus kam tabellenbasierte Design, in dem Designer HTML-Table-Tags--zur Darstellung von tabellarischer Daten--bedeutete für Erstellen der Struktur einer Website Design. Seit etwa 2002 begann jedoch Web-Profis unter Berücksichtigung tabellenbasierte Layouts als schlechte Programmierung Technik.

Hintergrund

Anfang veröffentlicht 2001 die einflussreiche online-Publikation A List Apart einen Artikel mit dem Titel "Von Hacks, CSS Tabellenlayout", der eine hitzige Debatte unter den Webdesignern ausgelöst hat. Viele Designer und Programmierer widerstrebt es mit erprobte und bewährte tabellenbasierte Designs zu stoppen. Im Jahr 2001 war die Browser-Unterstützung für CSS (Cascading Style Sheets) begrenzt. Internet Explorer 6 erschien im selben Jahr und hatte die besten CSS Unterstützung für seine Zeit, aber diese Unterstützung viele Fehler enthalten. Die berüchtigste IE6-Fehler--die "Box-Modell-Fehler" und "Doppel-Margin Bug"--machte auf ansonsten gut codierte CSS-basierter Layouts. Aus diesen Gründen dauerte es ein paar Jahre für Designer, tabellenbasierten Kodierung für CSS-basierte Programmierung zu löschen.

Wie Tabelle Layouts arbeiten

Tabellen-Layouts verwenden HTML-Table-Tags eine Struktur für die Website Grafiken und Inhalte erstellen. Das klassische Beispiel ist ein dreispaltiges Layout mit einer Überschrift und Fußzeile. In einem tabellenbasierten Layout verwenden Designer HTML-Tags erstellen Sie eine Tabelle mit einer Spalte zwei breiten Zelle am oberen und unteren Zeilen. Mittlere Zeile der Tabelle enthält drei Zellen, und jede Zelle ist eine Kolumne für die Website. Attribute, die nicht mehr verwendet in HTML 4 und oben erlaubt Programmierern, Kontrolle Abstand, Abstand, Breite und Höhe von Tabellenzellen.

Funktionsweise von CSS-Layouts

Layouts von CSS richtig trennen Inhalte von Präsentation gesteuert werden. Dies bedeutet, dass die HTML-Datei den Inhalt--Text, Bilder, etc.--enthält während die CSS definiert, wo diese Inhalte auf der Seite angezeigt wird. Designer können eine CSS-Datei zu verknüpfen, auf jeder Seite der Website und werden daher in der Lage, die gesamte Website Design zu ändern, dass eine CSS-Datei ändern. Der standard-CSS-Ersatz für Table-Tags in HTML 4 und XHTML ist das < Div >-Tag, obwohl HTML 5 führt neue < Abschnitt > und < beiseite >-Tags, die in ihrem Namen als < Div > mehr Bedeutung tragen. Die CSS-Datei verwendet die Klasse oder ID-Attribut zu deiner speziellen < Div > Tags.

Warum Tabellen-Layouts sind schlecht

Tabellenbasierte Layouts erfordern Änderungen an jeder Seite der Website, sobald das Design geändert wird. Selbst wenn eine tabellenbasierte Layout CSS Stil verwendet, sind um die Layout-Struktur zu ändern Änderungen zu jeder Seite erforderlich. Bei der Aktualisierung eines tabellenbasierten Layouts ist die Suche nach dem Inhalt bearbeiten schwieriger in den labyrinthischen Code von Tabellen in Tabellen geschachtelt. Web-Designer können verlangen, extra für die Zeit es dauert, bis die tabellenbasierte Layouts bearbeiten oder sie werden vorschlagen, Verschrottung der aktuellen Website insgesamt. Ein weiteres Ergebnis der tabellenbasierte Layouts ist aufgeblähten Code. Große Websites mit starkem Verkehr leisten nicht aufgeblähten Code wegen der Bandbreitenkosten.