Tabellen wurden zu einem einzigen Zweck erfunden: Um Daten tabellarisch darzustellen. Aber dann wurde es für Designer möglich, durch die Eigenschaft border="0" für Tabellen, eine Art unsichtbares Gitter zu generieren, um Bilder und Text zu positionieren. Diese Layoutmöglichkeit ist besonders bei Html-Anfängern beliebt, da es leicht zu erlernen ist.
Vorteilhaft ist auch, daß Tabellen von allen gängigen Browsern gleich interpretiert und angezeigt werden - selbst die alte Version 4.x von Netscape kommt damit zurecht.
Für den Gebrauch von Tabellen spricht auch die gute Brechenbarkeit: es ist einfach vorherzusehen, wie sich eine Tabelle beim Wechsel von Fenstergröße oder Auflösung verhält.
Die Nachteile von Tabellen sind dafür aber umso gravierender
Ein wichtiger Punkt ist die Tatsache, daß die logische Struktur des Dokumentes mit der generischen, also der Gestaltung, vermischt werden. Die Folge davon ist der sogenannte "aufgeblähte Quellcode". Um relativ simple Vorgaben mit Tabellen zu erledigen, sind oft eine Vielzahl von Befehlen zu notieren, zum Beispiel um Bilder auf einer Webseite zu positionieren. Dadurch werden die HTML-Dokumente sehr groß und damit die Datenmenge, die der Besucher runterladen muß.
In diesem Zusammenhang ist zu bemerken, daß das den Webmaster Geld kostet, da "Traffic" in der Regel Geld kostet. Nicht nur deshalb würde sich der Umstieg zu einem schlanken und wohldefinierten CSS-Layout lohnen; aber dazu später mehr.
Für mich persönlich überwiegen eher die Nachteile von Unübersichtlichkeit des Quellcodes oder des Arbeitsaufwandes, mit dem man bei Designänderungen und Aktualisierungen rechnen muß. Aber Tabellenlayouts sind auch in Hinsicht der Zugänglichkeit eine Katastrophe. Sie sind nicht nur für Leute mit Behinderungen ungenügend, sondern auch der Zugriff über PDAs und Handys wird fast unmöglich.
Das CSS-Layout. Die Zukunft.
Anstatt verschachtelte Tabellen zu benutzen und leere Zellen mit Abstandshaltern ("Spacer-Gifs") zu füllen, kann man simples Markup benutzen, das schneller läd, einfacher zu ändern und zugänglich für jedermann ist. Moderne Browser halten sich immer genauer an die Webstandards, deshalb wird man in Zukunft auf diese archaischen Workarounds verzichten.
Mit strukturiertem Markup und CSS für das Layout wird es dem Webmaster ermöglicht, den Inhalt der Seite von der Darstellung zu trennen. Dadurch ist ein schnelles Redesign oder kleine Änderungen bequem durch die Modifizierung des Stylesheets möglich. Der Quelltext bleibt schlank und übersichtlich und die Elemente können fast beliebig angeordnet werden, wie zum Beispiel Seiten wie CSS-Zengarden oder der CSS-Contest von Webmasterpro demonstrieren.
Über letzteres freuen sich dann auch die Suchmaschinenbots, da sich dadurch im Quelltext Inhalte vor das Menü bringen lassen
Quelle: standards.webmasterpro.de/
Die meisten leute haben nur Probleme da sie nicht um die eigenschaften der elemente wissen oder nach welchen grundregeln sich elemente verhalten.
alle Elemente liegen folgendem modell, dem border-box-modell zugrunde
sie können abstände nach außen (margin's), abstände nach innen (padding's) haben.
Es gibt Block und Inline elemente.
Blockelemente richten sich nach ihrem elternelement, so heißt das element in dem sie drinliegen.
<div style="width:500px; background:#FFF;"> <div style="background:#000; margin:15px;">text</div> </div>
somit wird das div mit dem inhalt text maximal 470px breit.
das elternelement stellt maximal 500px zur verfügung und der margin (15px zu allen seiten abstand) wird auf die elementbreite des inneren divs mit draufgerechnet.
dadurch das Blockelemente immer 100% ihrer breite einnehmen (es sei denn man schreibt das verhalten über css um) liegen blockelemente ungern nebeneinander
es sei denn sie sind kleiner oder gleichgroß zum verfügbaren restplatz, ansonsten brechen sie um.
anders verhalten sich inline-elemente, diese richten sich nach der größe ihres inhalts.
<a> ist z.b. ein inline element. <a> deutet an das der inhalt klickbar ist, und da a inline ist ist auch nur das html innerhalb von a ein link.
man beachte inline-elemente ignorieren margin und padding, um sie dazu zu bringen darauf zu reagieren weist man sie an sich wie ein blockelement zu verhalten oder wie ein hybrid aus beiden.
display:block; oder display:inline-block;
da das thema ausufernd behandelt werden kann, versuche ich einfach mal auf die fragen in diesem thread einzugehen.
Beispiele für die macht von CSS:
CSSZengarden
Webmasterpro CSS-Contest
CSS in allen (Webdeveloper)-Lebenslagen
Stu-Nicholls
CSS Holy Grail (3-Spalten fluid CSS Layout) (gute basis zum anfangen)
css4you
thread eröffnet da gewünscht
Zitatverwendete ilchClan Version: 1.1
betroffene Homepage: ilch.de
Zuletzt modifiziert von annemarie am 29.06.2009 - 15:05:20
