HTML Warum Tabellen zum Layouten besser sind...

[-=Renegade=-]

Wie gesagt, mal die Thematik Jinx lesen

Und was ich vorher so geschrieben habe, was JS auch noch alles kann.

Außerdem vergleichst du hier genauso zwei paar Schuhe, einmal sprichst du von General Attacks (bei denen es nur darum geht möglichst viele Informationen, Passwörter, Computer,... zu sammeln) und im anderen Fall von Target Attacks (die einen speziellen PC/User addressieren)

Wenn es darum geht, dass ein Virenauthor möglichst viele PCs unter seine Kontrolle bekommt, schert es ihn doch auch nicht, ob du einen Virenscanner hast oder nicht. Für ihn zählt allein die erfolgreiche Programmierung und Verbreitung von Malware und dass er damit ein möglichst hohes Resultat erzielt. Selbiges bei dem von dir beschriebenen XSS Szenario: Ein Forum wird exploitet und der Angreifer erhält Kontrolle über die eine möglichst hohe Anzahl an Accounts.

Wenn es nun um ein Target Attack geht, also man spezielle Informationen von einem User sucht, ist es für einen Malware Autor durchaus erheblich, ob und welchen Virenscanner (und weitere Schutzmechanismen) du verwendest, um den PC zu schützen.

Gleiches im XSS Fall: Die Möglichkeiten sind vielfältig (wie oben beschrieben, ich werd mich sicher jetzt nicht nochmal wiederholen, aber man kann mit JS an genug sensible Daten rankommen) Noch ein kurzes Szenario: Man könnte über ein XSS Exploit in einem Forum, in dem du angemeldet bist, versuchen dein spezielles Passwort zu erhalten um unter der Annahme, dass du ein Masterpasswort verwendest, Zugang zu deiner Seite erhalten



so long
Renegade

 

[PW-toXic]

Nungut, es gibt sicher einige Gründe, die das deaktivieren von Javascript rechtfertigen. Ich finde jedoch, dass diese Sicherheit übertrieben ist, da sie die Sicherheit nur ein klein wenig erhöht. Der Verzicht auf viele Features ist (Meinungssache!) hier viel zu hoch.
Aber das Thema ist zu komplex um es am Rande einer HTML/CSS/Table Diskussion zu führen

 

[-=Renegade=-]

Naja, wie gesagt, ich für meinen Teil verwende ja NoScript, mit dem ich gewünschte Skripte teiweise zuschalten kann. Damit muss ich, wenn ich der Seite vertraue, nicht auf deren Funktionalität verzichten. Und trotz zugelassenem JS is die Erkennung von XSS Exploits in Noscript gar nicht mal soo schlecht, aber bei weitem sicher nicht 100%

Von daher ist für mich der Verlust von Funktionalität nur gegeben, wenn ich der Seite potentiell nicht vertraue, ein akzeptabler Verlust imo



so long

 

[Teralios]

....

...

Tabellen dienen nicht dem Layout. Tabellen sind zur Darstellung von tabellarischen Daten gedacht. Das WBB3 hält sich daran. Natürlich kann man Tabellen aber auch gestalten und im richtigen Kontext (Tabellarische Auflistung von Daten) auch dazu nutzen. Der DIV-Container (Diversion) ist ein vollständiger Container ohne wirklichen inhaltlichen Bezug, genauso wie der SPAN-Container. Sie haben also keine direkte Bedeutung für den Text, die Tabelle eben schon. Das heißt, wenn man ein semantisches HTML-Dokument haben möchte, gehört dabei jedes HTML-Element eben genau so benutzt, wie es gedacht ist, und da heißt es, eine Tabelle ist nicht für das Layout da.

Dann kommen wir zu dem was du zu CSS sagst. CSS dient bei weitem nicht dazu, einfach die Wartbarkeit zu verbessern, sondern auch dazu, Design und Inhalt zu trennen. Wer CSS im HTML-Dokument verwendet, trennt aber wieder Design und Inhalt nicht. Auch gab es in HTML die Auszeichnungselemente und Auszeichnungsattribute. Diese sollten durch CSS abgelöst werden, und sind es weitest gehend, um eben das zu erreichen was ich bereits sagte: Design und Inhalt trennen. Nur das bedeutet noch nicht, dass eine Webseite semantisch korrekt ist. Ein CSS-Layout kann auch ein Tabellenlayout sein, die nächste Trennung ist dann eben der semantische Einsatz von den richtigen HTML-Elementen.

Ich verstehe auch diese Diskussion dahinter nicht, die ihr führt. Meine Ehre als Informatiker bringt mich dazu, immer das moderner zu versuchen, es zu verbessern und zu nutzen. Ich will nicht still stehen, ich will weiter gehen. Wer aus Faulheit meint Tabellenlayouts zu nutzen, hat in dem Beruf nichts zu suchen, wer sagt, er will Webseiten designen, aber nicht mit der Zeit gehen, sollte ebenso bitte aufhören. Wer Interesse hat, wer wirklich was tun will, wird immer versuchen weiter zu kommen, sich immer verbessern wollen. Wer das nicht will, sollte aufhören. Das ist meine eigene Meinung dazu und ich muss ehrlich sagen, als ich anfing mit Programmierung, mit HTML und XML, baute ich die ersten Layouts auch auf Tabellen auf, aber ich sah auch, dass es anders geht und reinem Interesse und den Wunsch besser zu werden, versuche ich immer mehr, meine Layouts und Seiten semantischer zu gestalten. Und jetzt das nächste. Semantische Layouts und CSS haben nichts mit Barrierefreiheit zu tun, diese Layouts sind der einfachste Weg zu einem barrierefreien Layout, aber nur weil ein Layout semantisch korrekt ist, heißt es noch nicht, dass es keine Barrieren mehr enthält. (Farbenblindheit und andere Dinge.)

 

[NOOB]

Egal ob Tabelle oder div, was am Ende immer zählt ist der Inhalt!

 

[PW-toXic]

Dann kommen wir zu dem was du zu CSS sagst. CSS dient bei weitem nicht dazu, einfach die Wartbarkeit zu verbessern, sondern auch dazu, Design und Inhalt zu trennen

Ich habe bereits gezeigt, dass dies nicht möglich ist. Ich werde das nicht nocheinmal tun, nur weil wieder jemand seine Meinung zu einem Thema schreiben wollte, ohne sich vorher damit zu beschäftigen.

Meine Ehre als Informatiker bringt mich dazu, immer das moderner zu versuchen, es zu verbessern und zu nutzen.

Und deine Ehre als Mensch sollte dich dazu bringen sich mit dem Thema auseinander zu setzen bevor man irgendeine beliebige Meinung von sich gibt, denn sonst könnte man möglicherweise Leute damit beleidigen, die viel Mühe in dieses Thema gesteckt haben, und dann aber von unqualifizierten Beiträgen belästigt werden, die trotzdem von sich behaupten es zu sein.
Und das bezieht sich unter anderen auch ganz konkret auf dich.
Wieso so scharf? Nungut, ich kann es begründen:

Wer aus Faulheit meint Tabellenlayouts zu nutzen, hat in dem Beruf nichts zu suchen, wer sagt, er will Webseiten designen, aber nicht mit der Zeit gehen, sollte ebenso bitte aufhören.

Diese Diskussion hat in diesem Thread nichts verloren. Bitte öffne einen eigenen Thread, da es hier zu keiner Zeit zur Diskussion stand ob das TableLayout gut oder schlecht ist. Beweis:
Punkt 3 Einleitung
3 Sätze.. Falls du nicht weisst was ein Table Layout ist, dann nimm dir bitte Punkt 1 zu Herzen.

Und wie bitte kannst du es überhaupt wagen zu definieren wer das Recht darauf hat Webseiten zu baun? Was bist du eigentlich für ein Mensch? Woher nimmst du dir das unverschämte Recht anderen Leuten vorzuschreiben was sie machen sollten?

Da du mich zweifach zitiert hast, und zusätzlich auch noch "du" geschrieben hast, muss ich davon ausgehen, dass sich das mit dem Beruf auf mich bezieht, auch wenn du in der unbestimmten Person schreibst. Wenn du mich nicht damit meinst, musst du mich in diesem kontext abhängigen Fall explizit herausnehmen um logischen Misverständnissen vorzubeugen.
Daher kann und muss ich daraus folgern, dass du wieder einmal das Thema verfehlt hast, da du nicht Punkt 5 gelesen hast, wo ich sehr deutlich Stellung zu dem beziehe, was du mir ankreidest.

Semantische Layouts und CSS haben nichts mit Barrierefreiheit zu tun, diese Layouts sind der einfachste Weg zu einem barrierefreien Layout,

Du widersprichst dir selbst innerhalb eines Satzes. Davon abgesehn hab ich zu diesem Thema bereits eine klare Aussage getroffen.
Was du meinst ist wohl dass man von "semantischen Layouts" (is mit HTML eh nicht möglich .. das <menu> tag wurde ja schliesslich gestrichen, aber ich glaube zu wissen was du meinst) nicht auf barrierefreiheit schliessen kann. Das ist durchaus richtig. Hilft jetzt aber auch nicht weiter.

 

[carom]

Hier muss man unbedingt erwähnen, dass die Flexibilität eingeschränkt ist! Ich habe oben ein Beispiel gezeigt. Wenn ich vorher ein Layout ohne 3 Spalten gehabt hätte, und somit nur 3 div boxen für meine 3 Bereiche hatte, dann reicht es mir nicht, wenn ich nur meine CSS Datei austausche um mein 3-spalten-layout hinzubekommen, sondern ich muss ebenfalls meinen HTML Quelltext ändern. Hier versagt ganz offensichtlich die gewünschte Präsentationsunabhängigkeit von HTML & CSS.
Der Grundgedanke ist jedoch sehr gut, und man kann trotzdem sehr viel präsentationsunabhängig machen.

Stichwort XSLT. Ich kann deine Ausführungen verstehen und bin selbst lange an Tabellen gehangen, aber flexibler als CSS + XSLT gehts nicht. Du schreibst deine XHTML ohne Layout und kannst dann per XSLT Transformation jedes denkbare Layout erreichen. Da kann man auch schön Handyoptimierte Seiten generieren oder welche zum Ausdrucken - alles erzeugt aus der selben XHTML deiner (Haupt-) Website. Die Unabhängigkeit ist weitgehenst wieder hergestellt, Redundanz wird vermieden.

Schaus dir an, du wirst begeistert sein.

 

[PW-toXic]

XSLT ist genial

scheitert jedoch am IE6

wenn man die volle FUnktionalität von CSS hätte würde ich das verhalten einfach mit display: table-cell etc... hinbekommen ohne dass ich das table tag verwende.



Praktisch setzt man das jedoch dann so um, dass dass man SERVERSEITIG diese templates erstellt. Entweder man benutzt severseitig XSLT, oder man schreibt einfach ein simples html template worauf man seine CSS styles anwendet

HTML&CSS templates setzt man einfacher und schneller um
XSLT ist jedoch bei WEITEm schöner, und vorallem bei sehr großen projekten sinnvoll.
Geniales beispiel: world of warcraft seite von blizzard -> traumhaft!


edit: XSLT tangiert aber auch nur den rand dieser Diskussion, da du mit XSLT letzendlich wiederum HTML erstellen musst (über die transofrmation -> XML -> XHTML (oder HTML)) womit man wieder beim gleichen Problem ist.. tabelle oder 4-fach verschachtelte divs die keiner versteht und schwer wartbar sind. (oder böse CSS hacks mit padding-top: -9999)

 

[Teralios]

...

Wowie, jetzt hast du es mir aber gegeben. Ach Gottchen ich zittere.
Wo widerspreche ich mir? Ich sagte nur, dass ein Semantisches-Layout nicht Barrierefrei sein muss, aber dafür eine Vorraussetzung ist. Du hast schon mal was von Farbenblindheit gehört? Dir ist auch klar dass es nicht ungemein wenige gibt, die das sind? Ich sagte in diesem Satz nur aus, und das ist der meisterbreiteste Trugschluss, dass ein semantisches Layout eben nicht Barrierefrei sein muss, es aber kann. Auch sage ich jetzt, dass diese Art von Layout aber der einfachste Weg ist, seine Seite Barrierefrei zubekommen.

Wo hast du gezeigt, dass Layout und Inhalt sich nicht trennen lassen? An den Gruppierungs-Container DIV? Der absolut keine Bedeutung für den Inhalt hat, da er nicht aussagt, sondern eher wie eine "Seite" oder ein "Kapitel" zu verstehen ist? Genau so der SPAN-Tag, der ohne Bedeutung einfach einen Text einschließen kann, und als "Container" dient, aber Inhaltlich null Bedeutung hat? Weil HTML Klassen und IDs kann, die auch für den Einsteig mit CSS genutzt werden können, aber immer noch einen Sinn, auch für den Inhalt haben? Man kann Inhalt eines HTML-Dokumentes und das Layout sehr wohl trennen. Die Frage ist, wie man dran geht.

Ich soll keine Erfahrung haben? NAja da bezweifel ich, ob du überhaupt ansatzweise Berufstätigt damit zutun hast oder nicht. Ich habe es sowohl Studienmäßig als auch Berufsmäßig und halte dir gerne ein Vortrag von Vor- und Nachteilen eines Semantische Layouts und die Vor- und Nachteile eines Tabellenlayouts. Letzters hat seine Vorteil in bestimmten Situationen, wobei ich diese heute, nach all der Zeit nicht mehr sehe und es als Zumutung empfinde, damit zu arbeiten.

Ja, meine Meinung zu den Leuten, die Tabellenlayouts beführworten, kann man gerne trennen. Es ist meine persönliche Meinung dazu, als idealistischer Student und idealisticher Freiberufler in dieser Branche.

Tabellenlayouts, sind auf Tabellen aufbauende Strukturen, zur Strukturierten Darstellung einer Seite, wobei diese dann mittels CSS ein Design zu gewiesen bekommen. Diese Art des Desings zwängt aber die Webseite von anfang an in einen bestimmten Grundaufbau der eine genaue Vorstellung der Darstellung entspricht. Die Struktur der Seite ist also bereits durch das Verwenden der Tabelle vorgegeben. Ein Semantisches-Layout, in dem DIV-Container genutzt werden, entspricht dabei eher einer Abstrakten-Seiten struktur, die vollständig mittels CSS gestaltet werden kann. Kurz um => Tabellen-Layouts geben eine feste Seitenstruktur vor und das andere, wenn man auf Tabellen-Layout verzichtet und lieber DIV-Container nimmt, ist eine Abstrakte Struktur. Hoffe diese Wörter gehen nicht über dein Wissen hinaus. ( Entschuldigt, das musste sein.)

Das du bezog sich im ersten Moment auf dich, dannach warst du überhaupt nicht mehr abgesprochen, aber schön wie du es ließt. Zu meinem Glück kann man Texte auch schreiben und die Leute schön verwirren. Ich liebe Deutsch.

Nun ja, statt anderen vorzuwerfen, sie wüssten nicht wovon sie sprechen, solltest du dich auch genauer mit dem Thema beschäftigen.

 

[PW-toXic]

Na wenn du mir meinst vorschreiben zu können, was ich zu tun und lassen habe, dann brauchst du dich nicht wundern, wenn ich etwas schärfer antworte
Nun aber jetzt bin ich wenigstens im Gegensatz zu gestern (bin um 22 Uhr heimgekommen) ein wenig ausgeschlafen


Ist zwar eigentlich uninteressant, aber trotzdem:
Wenn du sagst, dass etwas nichts mit etwas anderem zu tun hat, dann ist das etwas wesentlich anderes als die "!=>" Beziehung ("daraus folgt im allgemeinen nicht"). Die Aussage, dass man jedoch von Barrierefreiheit auf "semantische Layouts" schliessen kann, widerspricht dem gewaltig. Denn wenn das der Fall ist, dann haben beiden Entitäten ("semantische Layouts" und Barrierefreiheit) sehr wohl etwas miteinander zu tun - nämlich ganz konkret die daraus folgt Beziehung: Barrierefreiheit => "semantisches Layout"

Wieso habe ich das überhaupt erwähnt? Nunja.. du bist dogmatisch in Bezug auf jede Kleinigkeit, und stellst das ganze nicht in die praktische Umsetzungsfähigkeit. Dann bin ich das auch.. damit zeig ich dir nur wie verdammt nervig das ist. Man muss praktisch denken. Und praktisch bedeutet in diesem Fall, dass ich sehr wohl was du meinst, obwohl es logisch gesehn falsch ist, was du gesagt hast.

Wo hast du gezeigt, dass Layout und Inhalt sich nicht trennen lassen?

Bevor ich dich jetzt suchen lasse, wiederhole ich das Problem hier in aller Kürze. Aufgrund deines proklammierten Fachwissens solltest du es ja schnell lösen können:

Die "semantik" von meinem Layout sieht wie folgt aus: Ich habe drei Bereich: Menü, Content, Bonusbar. Folglich sollte ich diese drei Bereiche in drei divs packen. Um das Layout mache ich mir noch keine Gedanken, da ich ja schliesslich unabhängig vom Layout arbeite, sondern nur meine Struktur definiere.
Mein HTML sieht also wie folgt aus:

<div id="menu"></div>
<div id="content"></div>
<div id="bonusbar"></div>

Jetzt möchte ich dazu mein Layout erstellen. Ich möchte etwas denkbar einfaches: Ich möchte alle 3 bereiche nebeneinander haben, wobei das menu links ist und 15% des horizontalen Platzes braucht und die bonusbar auch 15% - nur rechts. Der content liegt dazwischen. Alle drei spalten sollen eine unterschiedliche Hintergrundfarbe haben, und automatisch gleich hoch sein. Also wenn der content wächst, soll das menu und die bonusbar mitwachsen von der Höhe. (selbiges auch für menu-> content; bonusbar ->menu usw...)

Wie machst du das? Bitte IE6 kompatibel und ohne hacks.



Bezüglich Erfahrung: Ich habe bereits einen Vortrag über die vor und Nachteile bzgl HTML & CSS im Zusammenhang mit der Tabelle gemacht. Siehe Threadposting. Keiner hält dich davon ab das auch zu tun. Da du das gerne tust -> nur zu!


Und noch etwas am Rande: Bitte sprich nicht von semantischen Layouts, im Zusammenhang mit divs, die einen ID wert gesetzt haben. Das ist keine Semantik... Wo ist denn definiert was "menu" bedeutet?
ein <menu> tag wäre Semantik, dessen Bedeutung klar definiert ist. Aber das Element wurde nicht ohne Grund entfernt (decrepated). Das wäre zu vergleichen mit <emph> oder <h1> das eine Semantik bzgl. der Struktur eines Textes hat. Diese Semantik ist natürlich offiziell definiert! Eine implizierte Semantik wie id="menu" ist in der Informatik derzeit reichtlich uninteressant, da man von einer guten kontextabhängigen Analyse noch weit entfernt ist.

 

[PW-toXic]

Schade.. Und ich hab schon gehofft, dass jemand endlich mein Problem lösen würde

 

[Livven]

Wie machst du das? Bitte IE6 kompatibel und ohne hacks.

Code, der für etwas anderes als ursrünglich gedacht verwendet wird, bezeichnet man als Hack. Tabellen sind ursrünglich nicht für das Layout gedacht - man kann es machen, es ist aber ebenfalls ein Hack.

Bzgl der Semantik ist ein <table> keinesfalls besser als ein <div>.

 

[PW-toXic]

Ja nur behaupte ich ja nicht, dass <table> kein hack ist
Ich behaupte dass es ohne hack nicht geht!
und ich behaupte dass table in diesem fall der weniger schlimme hack ist

Ich warte also immernoch auf die Lösung, da hier ja immer wieder behauptet wird, dass man Layout und strukturelle Semantik trennen muss.. und dass es immer geht. Ich warte geduldig

 

[Livven]

Bei der CSS-Version sind Hacks meist nur für Browser, die vom Standard abweichen, nötig. Das ist auch richtig so - das wichtige ist, dass die Hacks klar als solche zu erkennen sein sollten.

Bei <table> ist beides nicht gegeben.

 

[PW-toXic]

Nenn mir doch bitte konkret ein Beispiel. Es hilft mir nix zu erfahren warum table schlecht ist, sodnern warum es schlechter ist als eine andere Lösung

 

[QXARE]

Markup verändern:

<div id="menu"></div>
<div id="bonusbar"></div>
<div id="content"></div>
<br class="clear" />

Falls sich das Layout nicht über 100% erstrecken soll:

<div id="container" style="width:x%;">
    <div id="menu"></div>
    <div id="bonusbar"></div>
    <div id="content"></div>
    <br class="clear" />
</div>

1. Spalte links und Spalte rechts werden in die dementsprechenden Richtungen gefloatet (float: left|right)
2. Zuweisung der Breite von 15%
3. Mithilfe der Eigenschaft "clear" das Floaten der Elemente beenden (clear: both)

Keine Fixes für IE sind notwendig und wenn, dann CCs.

PS: Tabellen sind nicht zum Layouten dar.

 

[PW-toXic]

1) Markup ändern ist nicht drin, da sonst die Unabhängigkeit von Layout und Struktur nichtmehr gegeben ist!

2) Dein Beispiel funktioniert nicht, da die 3 Bereiche nicht automatisch gleich hoch sind!


Dass Tabellen nicht zum Layouten gedacht sind weiss ich auch, aber bitte nenn mir eine Alternative die auch funktioniert

 

[QXARE]

Jo, du musst dafür dem Container mit einer Hintergrundgrafik formatieren die die 3 Spalten hat. Wäre das gelöst.

Punkt 1 versteh ich irgendwie nicht "die Unabhängigkeit von Layout und Struktur nichtmehr gegeben ist", aber für dich:

Struktur gleichlassen, Container aber dennoch hinzufügen. Alle Elemente nach links floaten und dem Content Container eine Breite von (100%-15%-15%=70%) geben.

<div>-Container funktionieren und die sollte man auch benutzen.

 

[PW-toXic]

Hintergrundbild funktioniert ebenfalls nicht, da die Spaltenbreiten relativ zur Fenstergröße sind, und somit dynamisch und nicht statisch sind.

Zu Punkt 1) Es wurde hier immer wieder mehrfach propagiert, dass man das HTML Markup und das Layout komplett voneinander trennen kann.
Wenn ich jedoch das HTML Markup ändern muss, um das Layout zu ändern, dann verletzte ich diese Eigenschaft. Wenn es nicht möglich ist das vollständig zu trennen mit HTML und CSS (und ich weiss dass das so ist), dann wäre hiermit gezeigt, dass dieses Argument eh nicht zählt, weil es ja eh nicht möglich ist

Konkret bezieht sich das auf das hier:

esings zwängt aber die Webseite von anfang an in einen bestimmten Grundaufbau der eine genaue Vorstellung der Darstellung entspricht. Die Struktur der Seite ist also bereits durch das Verwenden der Tabelle vorgegeben. Ein Semantisches-Layout, in dem DIV-Container genutzt werden, entspricht dabei eher einer Abstrakten-Seiten struktur, die vollständig mittels CSS gestaltet werden kann. Kurz um => Tabellen-Layouts geben eine feste Seitenstruktur vor und das andere, wenn man auf Tabellen-Layout verzichtet und lieber DIV-Container nimmt, ist eine Abstrakte Struktur.

Natürlich ist man mit DIVs ein klein wenig flexibler, doch dadurch hat man noch lange nicht den Aufbau der Seite abstrakt beschriebne - unabhängig vom Layout.
Es ist ja erwünscht, dass man nur mit der Änderung in dem stylesheet das layout nach belieben ändern kann. Das ist jedoch nicht immer möglich.

 

[QXARE]

http://www.brings-online.eu/vorlagen/temp_basics/flex.html
http://www.yaml.de/fileadmin/examples/04_layouts_styling/3col_column_backgrounds.html

Dein Ansatz mit Markup und Layout ist aus SEO Gründen irgendwie total irrsinnig, außerdem widersprichst du dich mit deinem HTML Markup und Layout Gerede teilweise schon selbst weil du vor allem bei Tabellen zu 100% an dein Markup gebunden bist.

Natürlich stimmt es auch nicht dass Container in jedem Layout zu 100% flexibel sind, wobei man bei ZenGarden schon schöne Beispiele sehen kann wie man es doch machen kann.

Dass du ein vorgegebenes Markup so formatieren willst wie dir es gerade im Kopf herumschwirrt, wirst du in HTML und CSS mit keiner Möglichkeit realisieren können.