4. Warum soll ich Tabellen nicht als Layouthilfsmittel missbrauchen?

Warum soll ich Tabellen nicht als Layouthilfsmittel missbrauchen?

  • H

    Es geht hier darum darzulegen, weshalb man Tabellen nicht als Layoutmittel missbrauchen soll (also nur Tabellen benutzen, wenn man auch tabellarischen Inhalt hat).

    Fangen wir bei dem Prinzip von HTML an:
    HTML beschreibt den Inhalt der Seite, nicht das Layout. Das Element <strong> bedeutet nicht "fett", sondern "hervorgehoben/wichtig". Der Browser kann nun selbst entscheiden, wie er "hervorgehoben/wichtig" darstellt. Das muss nicht mit einer fetten Schrift sein, denn manchmal ist das nicht sinnvoll/möglich. z.B. wenn die Webseite vorgelesen wird, muss das Wort betont werden. Wenn das ganze im Textmodus ausgegeben werden muss (bzw. in einem Medium, wie das Handy, wo es keine dicke Schrift gibt), kann eine andere Farbe dafür gewählt werden usw.

    Um eben doch die Individualisierung von Webseiten zu ermöglichen hat man CSS erfunden. CSS wird normalerweise nicht im HTML Dokument definiert, sondern nur eingebunden. Die Unterstützung von CSS ist dem Browser aber völlig frei gestellt (denn er kennt den Inhalt und findet für sein Medium die beste Lösung).

    Ebenso ist es mit der Tabelle. Wenn Tabellen dargestellt werden sollen, so kann das auf ganz verschiedene Arten passieren. Abhängig davon, welches Medium ich habe. z.B. kann es Spaltenweise oder Zeilenweise vorgelesen werden usw.

    Das ist alles jedoch sehr theoretisch und manch einer wird denken "ist mir doch egal, meine Seite wird eh nur im IE dargestellt". Es gibt aber auch praktische Gründe, die gegen Tabellen und für CSS Positionierung sprechen.

    Flexibilität:
    CSS ist viel flexibler als Tabellen. Man kann Boxen überlappen lassen. Abstände willkürlich festlegen usw. CSS Seiten sehen auf kleinen Bildschirmen meistens nicht so gequetscht aus, wie Tabellen. Auch das Ausblenden einzelner Bereich ist einfach möglich.

    Geschwindigkeit:
    Tabellen werden oft erst dargestellt, wenn die komplette Seite geladen wurde oder es muss nochmal korrigiert werden.

    Wartung:
    Der eine Teil der Box ist mir doch zu klein? Kein Problem, mit CSS ändere ich einfach einen einzigen Wert unabhängig, wie viele Seiten ich verwalte.

    Der Code ist auch viel klarer, es ist einfacher Änderungen vorzunehmen.

    Traffic:
    Manch einer zahlt da ja richtig Geld für. CSS Definitionen sind in der Regel viel Platzsparender als ständige <td>s mit allen Paramtern.

    Standardkonformes XHTML:
    Tabellen sind kaum Standardkonform zu implementieren. Mit CSS ist das eine Selbstverständlichkeit.

    Trennung von Inhalt und Design:
    Das hatte ich oben ja schon angesprochen. Oft ist der Designer und der Webmaster nicht der gleiche. So hat dann jeder seinen Bereich und man muss sich nicht mit dem Kram des anderen beschäftigen.

    Das sind so die Punkte, die mir spontan einfallen. Es gibt bestimmt noch einige.

    Nachteile von CSS:
    - Man muss es lernen 🙂
    - Software aus den 80ern unterstützt das nicht -> Seiten sind aber weiterhin gut lesbar

    0
  • S
    Mod

    sorry wenn ich jetzt Punkte doppelt nenne.

    Wenn ich jetzt Tabellen sage, dann meine ich Tabellen als Layout mittel! Tabellen zum tabellieren von Daten sind nicht nur nützlich sondern auch wichtig!

    Der Hauptgrund:
    Tabellen sind dafür nicht gemacht worde
    Tabellen sollen zum zusammenfassen von daten dienen - nicht zum positionieren von daten!
    Browser die auf semantik parsen sind somit verloren. zB Sprach-Browser die die Seite als Sprachausgabe ausgeben. Denen ist die Positionierung egal. Und wie wollen die jetzt tabellen ausgeben? semantisch einfach eine katastrophe

    Using tables for layouts is like wearing dress shoes jogging?both work, but they're the wrong tools for the job.

    oder

    Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.

    W3C HTML4.01 Spezifikation

    Trennung von Design und Inhalt
    Mit Tabellen webe ich das Design fest in die Seite ein -> keine Trennung vorhanden

    Tabellen sind langsam.
    Opera7 ist der 1. Browser den ich kenne der Tabellen rendern kann bevor er die ganze tabelle runtergeladen hat!
    Das bedeutet, dass erst die ganze Seite geladen werden muss, bevor der Inhalt angezeigt wird!!!
    das kann auf 36,6 Modems ganz schön lange sein.

    Tabellen sind performance intensiv
    Eine Tabelle zu rendern kostet viel CPU Zeit. OK, auf Desktop Systemen ist das egal, aber auf handheld systemen nicht!

    Tabellen sind statisch
    Man kann Tabellen nicht so flexible gestalten wie wenn man mit CSS könnte.

    Wartbarkeit
    Verschachtelte Tabellen sind recht kompliziert zum warten - CSS ist da viel klarer und feiner.

    Traffic
    Tabellen sind groß -> viel text.
    verschachtelte Tabellen müssn eingerückt werden, sonst verliert man ganz die übersicht.
    CSS dagegen wird gecacht -> einmal pro webseite runterladen und der browser cached die *.css Datei.

    Tabellen sind auch nicht cross Browser fähig
    Gegen CSS wird immer gebracht: ohne CSS-Support sieht die Seite scheiße aus.
    ABER: exotische Browser stellen Tabellen auch nicht immer gut da - vorallem Handheld systeme

    Suchmaschinen
    Suchmaschinen können nicht immer Layout-Tabellen richtig lesen. Wie auch, sematisch ist da ja nix getrennt.

    Templating
    Wenn man viele verschachtelte Tabellen hat - dann wird das templating immer komplizierter!

    Line Breaks
    Wenn das Browser Fenster schmal ist, dann bricht eine Tabellenzeile trotzdem nicht um, und der user muss scrollen -> ganz böse

    Drucken
    Es kann Probleme beim Drucken von so großen Tabellen geben

    Zukunft
    Die Zukunft gehört CSS! Mit den ganzen Media-Typen ist CSS unschlagbar, da man verschiedene style für verschiedene medien angeben kann -> tabellen verhindern dieses feature dann teilweise (weil man ja die tabelle nicht ändern kann)
    und er CSS Support wird immer besser werden - das problem mit den Tabellen bleibt!

    [ Dieser Beitrag wurde am 08.03.2003 um 16:03 Uhr von Shade Of Mine editiert. ]

    0
  • M

    Hmm... meine neue Homepage komplett mit Tabellen aufgebaut... wie macht man überhaupt sowas mit CSS? Ich hab jetzt schnell mal in SelfHTML nachgeschaut, aber wo soll ich diese Styles zur Positionierung der Elemente reinschreiben? Ich bin kein CSS-Neuling, aber der absolute Guru nun auch wieder nicht. Darum meine Frage: WIE geht das?

    thx & cya 🙂

    0
  • S
    Mod

    Original erstellt von MagiC Creator:
    Ich bin kein CSS-Neuling, aber der absolute Guru nun auch wieder nicht. Darum meine Frage: WIE geht das?

    naja, man muss kein Guru sein, um eine CSS Referenz lesen zu können:

    position:absolute bzw. float
    und dann
    top, left, right, bottom sowie width und height richtig verwenden.

    0
  • M

    Das hab ich auch schon gefunden... aber dann muss ich ja _jedes_ noch so kleine Element meiner HP positionieren?!? Oder soll ich ne <div> machen?

    thx & cya 🙂

    0
  • H

    Ne, mache ein div.

    Positioniere so wenig wie möglich als 'absolut' (das Zeug ist dann nicht mehr so anpassbar an die Bildschirmgröße).

    Innerhalb der divs kannst du ja wieder ganz normal positionieren (als static, also default).

    0
  • M

    Danke, ich probier' das dann mal :).

    thx & cya 🙂

    0
Anmelden zum Antworten