Tabellen-Layout

[yannikst]

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!

 

[Broken Sword]

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
hallo
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

 

[yannikst]

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

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" ):

-------------------------------------------------
I I
I Header / Bild I
I I
-------------------------------------------------
I I I
I I I
I I I
I Menü I Content / Inhalt I
I I I
I I I
I I I
-------------------------------------------------

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

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

Header


Menü
Content​

 

[Broken Sword]

Was mir aufgefallen ist, ist dass die Überschriften

etc beim Firefox kleiner dargestellt werden und somit auch net schön aussehen - gibt es da eine Alternative?​

[HEADING=1][SIZE=20px]

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

-------------------------------------------------
I I
I Header / Bild I
I I
-------------------------------------------------
I I I
I I I
I I I
I Menü I Content / Inhalt I
I I I
I I I
I I I
-------------------------------------------------

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

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

Header


Menü
Content

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

[/SIZE][/HEADING]

[/HEADING]




Header / Bild


Menü


Content / Inhalt

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

Gruß
Broken Sword​

 

[yannikst]

Ah, ok, danke.

Das mit der Überschrift hätte ich auch selbst merken können 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
einfügen? Und das Menü hast du so gemacht, dass es "verschoben" werden kann (zumindest im Dreamweaver) - hat das eine bestimmte Bedeutung?

 

[Broken Sword]

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.

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
einfügen?

Ich habe mal die CSS-Angaben Erklärt:

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.

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

 

[yannikst]

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?

 

[Pjotter]

Also schön beschrieben ist doch alles bei Selfhtml....


float und clear sind sozusagen Gegenspieler.
float bestimmt wie umflossen werden soll und clear bricht das Umfließen ab !!!

 

[Liebei]

Es gibt noch ein paar Seiten die dazu interessant sind und Beispiel bereithalten:

Home: Yet Another Multicolumn Layout | An (X)HTML/CSS Framework
Dynamic Drive CSS Layouts- Tableless, CSS based templates

Was unbedingt dazu notwendig ist, ist CSS:

CSS 4 You - The Finest in Stylesheets