Tabellen-Layout


  • yannikst
  • 1399 Aufrufe 8 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Tabellen-Layout

    Hallo Leute!

    Immer wieder lese ich im Netz darüber, dass man auf Layouts aus Tabellen verzichten sollte.

    Doch das ist doch (meiner Meinung nach) das einfachste Mittel, ein nettes Layout zu erzeugen und auch unproblematisch!?

    Meine Frage daher nun mal: Wen stört das denn und weshalb sollte man davon abgehen? Welche Nachteile birgen Tabellen für das Layout wirklich und wie soll man sonst seine Website ausrichten, damit nichts verschoben ist und genau dort sitzt, wo man es haben möchte?

    Ich würde mich auf Tipps, Anregungen und Alternativen sehr freuen - vielen Dank!

  • Hi yannikst,
    das größte Problem mit Tabellen-Layouts ist, dass sie kein HTML-Standard sind, so hat meist jeder Browser seine eigenen Art Tabellen darzustellen. Außerdem haben text-to-speech Programme, da das Layout nicht logisch von links oben nach rechts unten verläuft, oft Probleme mit solchen Seiten.
    Die Alternative zu Tabellen als Layout zu benutzen sind DIVs/CSS. Der div- bzw. im ehemaligen Netscape layer-Tag waren eigentlich DIE Tags für das Layout. Table ist, wie gesagt, dafür nämlich gar nicht vorgesehen.

    Ich persönlich habe in meinen ersten Homepage mit table gearbeitet und dachte auch, dass es nichts Einfacheres gibt. ABER, mit der Zeit kann man's halt und kriegt ein DIV-Layout schneller hin, als ein Tabellen-Layout. (Ist ja auch nicht schwer <div>hallo</div> zu schreiben)

    Ein interessanten Link hab ich in meinen Bookmarks für dich gefunden: Tables vs CSS: PROS and CONS - 15 points to consider before choosing a traditional table website or a CSS tables website.(i.e. CSS-P - CSS Positional or CSSO - CSS Only website) - 01 - Pros and Cons, advantage and disadvantages (or Tables vs. Divs)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Danke an dich für den Link. Aber das ist alles auf Englisch. Ich kann zwar Englisch, aber das ist mir dann doch zu viel...

    Was die Tabellen in den Browsern betrifft, also die gängisten IE und Firefox zeigen das alles eigentlich gleich an. Was mir aufgefallen ist, ist dass die Überschriften <h1> etc beim Firefox kleiner dargestellt werden und somit auch net schön aussehen - gibt es da eine Alternative?...

    Naja, zurück zum Thema:

    Nehemen wir mal an, ich habe eine Website, die ein Layout hat, wie folgt:

    - Oben ein Header (Graif etc.)

    - darunter dann links ein Menü (immer gleich) und rechts der eigentliche Content

    Ungefär so (bitte verzeiht mir das "Gekrakel" :D):

    Brainfuck-Quellcode

    1. -------------------------------------------------
    2. I I
    3. I Header / Bild I
    4. I I
    5. -------------------------------------------------
    6. I I I
    7. I I I
    8. I I I
    9. I Menü I Content / Inhalt I
    10. I I I
    11. I I I
    12. I I I
    13. -------------------------------------------------
    Alles anzeigen


    Würde genau das so einfach mit DIVs funktionieren? Und was hat CSS dann damit zu tun?

    Wäre also folgendes z.B. korrekt?:

    <div>Header</div><br>
    <div>Menü</div><div>Content</div>

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von Broken Sword () aus folgendem Grund: ASCII-Bild verbessert :D

  • yannikst schrieb:

    Was mir aufgefallen ist, ist dass die Überschriften <h1> etc beim Firefox kleiner dargestellt werden und somit auch net schön aussehen - gibt es da eine Alternative?

    Quellcode

    1. <h1 style="font-size:20px">

    Dann wird es überall mit eine Größe von 20 Pixel dargestellt ;)


    yannikst schrieb:


    Brainfuck-Quellcode

    1. -------------------------------------------------
    2. I I
    3. I Header / Bild I
    4. I I
    5. -------------------------------------------------
    6. I I I
    7. I I I
    8. I I I
    9. I Menü I Content / Inhalt I
    10. I I I
    11. I I I
    12. I I I
    13. -------------------------------------------------
    Alles anzeigen


    Würde genau das so einfach mit DIVs funktionieren? Und was hat CSS dann damit zu tun?

    Wäre also folgendes z.B. korrekt?:

    <div>Header</div><br>
    <div>Menü</div><div>Content</div>

    Mit CSS formatierst du die DIVs, die sonst einfach nur Zeilen im Browser darstellen.
    Dein Beispiel könnte in DIV-Style so aussehen:

    HTML-Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    2. "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    3. <html xmlns="http://www.w3.org/1999/xhtml">
    4. <head>
    5. <title>TEST::DIV::LAYOUT</title>
    6. <style type="text/css">
    7. <!--
    8. * {text-align:center}
    9. #wrapper {
    10. background-color:#922;
    11. width:70%;
    12. min-height:600px;
    13. margin:20px auto;
    14. }
    15. #header {
    16. width:100%;
    17. height:150px;
    18. background-color:#292;
    19. }
    20. #menu {
    21. width:300px;
    22. background-color:#229;
    23. position:absolute;
    24. min-height:450px;
    25. }
    26. #content {
    27. padding:
    28. width:80%;
    29. padding-left:300px;
    30. margin:5px auto;
    31. }
    33. -->
    34. </style>
    36. </head>
    37. <body>
    38. <div id="wrapper">
    39. <div id="header">
    40. Header / Bild
    41. </div>
    42. <div id="menu">
    43. Men&uuml;
    44. </div>
    45. <div id="content">
    46. Content / Inhalt
    47. </div>
    48. </div>
    49. </body>
    50. </html>
    Alles anzeigen


    Ich finde das einfacher und vor allem schneller editierbarer als eine Tabellen-Variante.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von Broken Sword ()

  • Ah, ok, danke.

    Das mit der Überschrift hätte ich auch selbst merken können :D Danke für den "Anschub"...

    Zum Layout: Ok, sieht gut aus...

    Ich nehem mal an, dass "Wrapper" eine Art "Umhang für das Gesamt-Konstrukt ist?

    Werden die einzelnen DIVs automatisch nebeneinander gemacht? Was wäre, wenn jetzt noch ein Footer dazukäme? Müsste man dann unter dem letzten ein <br> einfügen? Und das Menü hast du so gemacht, dass es "verschoben" werden kann (zumindest im Dreamweaver) - hat das eine bestimmte Bedeutung?

  • yannikst schrieb:

    Ich nehem mal an, dass "Wrapper" eine Art "Umhang für das Gesamt-Konstrukt ist?

    Ja, #wrapper hält das ganze Zusammen. So kann man Gesamtgrößen einfach bei einem Element ändern, ohne alle Elemente durchgehen und ändern zu müssen.

    yannikst schrieb:

    Werden die einzelnen DIVs automatisch nebeneinander gemacht? Was wäre, wenn jetzt noch ein Footer dazukäme? Müsste man dann unter dem letzten ein <br> einfügen?

    Ich habe mal die CSS-Angaben Erklärt:

    Quellcode

    1. <style type="text/css">
    2. <!--
    3. #wrapper {
    4. background-color:#922; /*Hintergrundfarbe*/
    5. width:70%; /*Breite*/
    6. min-height:600px; /*mindest Höhe, geht dann aber auch Höher*/
    7. margin:20px auto; /*Abstand oben 20 Pixel, von links automatisch (mittig) //geht nur, wenn eine Breite angegeben ist*/
    8. }
    9. #header {
    10. width:100%;
    11. height:150px; /*Höhe*/
    12. background-color:#292;
    13. }
    14. #menu {
    15. width:300px;
    16. background-color:#229;
    17. position:absolute; /*Wechselt den "Bezug" von #wrapper zum Gesamtfenster //So wird es für andere Elemente nicht mehr wahrgenommen*/
    18. min-height:450px;
    19. }
    20. #content {
    21. width:80%;
    22. padding-left:300px; /*Innenabstand-Links //damit es nicht hinter #menu verschwindet*/
    23. margin:5px auto;
    24. }
    26. -->
    27. </style>
    Alles anzeigen


    Du siehst, es wird nichts automatisch nebeneinander gestellt.
    Wenn man nicht den position/padding Weg gehen will, kann man auch auf float:left|right|none bzw. clear setzen, damit es nebeneinander gesetzt wird. Doch hierbei gilt Vorsicht: Die Höhe von Float-Elementen interessieren "parent-Elemente" nicht.

    yannikst schrieb:

    Und das Menü hast du so gemacht, dass es "verschoben" werden kann (zumindest im Dreamweaver) - hat das eine bestimmte Bedeutung?

    Das ist nur, weil das Element postion:absolute ist. (Beschreibung, was das zu bedeuten hat, steht ja oben)

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Also ich habe jetzt dieses float benutzt und habe bisher nichts Negatives feststellen können!??

    Und was ist der Unterschied zwischen "float" und "clear"?

    Kann jetzt alles was als Content in ein DIV geschrieben wird wirklich unproblematisch erstellt und formatiert werden? Kann ich also problemlos vorhandenen Content in das neue Layout reinkopieren, ohne dass etwas verschoben wird?

    Was passiert wenn ich jetzt Tabellen oder auch weitere DIVs in den Bereich "Content" einfüge, die ja ihr ganz eigenes Layout haben?

    Also ich habe bemerkt, wenn ich im Content-DIV eine Tabelle reinmache (width="100%") dann wird die im Dreamweaver voll auseinandergezogen - im IE und im Firefox dann aber korrekt dargestellt - was bedeutet das?

    Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von yannikst ()