Tabelle: Zeilen und Spalten immer gleich lang und breit
- Ersteller madinus
- Erstellt am
Syren Baran
Neues Mitglied
Und mit Tabellen kann man das ebenso. Da kommt ne Seite bei raus bei der kein Validator was zu meckern hat.
Müssen wir uns jetzt mit Korrinthenkackerei rumschlagen?
Den Unterschied zwischen einer Scripting-Sprache und einer Programmiersprache kennst du nicht?
_Thor_
Aktives Mitglied
Der Validator prüft die Syntax, nicht die Semantik, den Unterschied kennst du nicht?
Syren Baran
Neues Mitglied
Dann sag mir mal, wo das Problem ist, wenn etwas syntaktisch korrekt ist, korrekt dargestellt wird, sowohl auf grafischen Browsern als auch auf textbasierten und einfach zu bedienen ist?
_Thor_
Aktives Mitglied
Ganz einfach, bei HTML geht es nicht um das Aussehen. Bei HTML geht es nur um die Semantik. Für das Aussehen ist CSS zuständig.
Einige Clients sind auf die Semantik angewiesen, damit sie erkennen können, was eine Überschrift ist, was eine Liste ist, was ein Textansatz ist usw. Dazu gehören unter anderem Screenreader, Textbrowser und Suchmaschinen.
Dies ist nur mit korrekter Semantik zu erreichen. Ich habe es zwar schon einige Male erklärt, aber ich mache es gerne noch einmal.
Dies ist zwar syntaktisch korrekt und kann auch so formatiert werden, wie eine Überschrift, semantisch ist es aber keine Überschrift, egal was du damit anstellst.
HTML:
<div id="header">Überschrift</div>
HTML:
<h1>Überschrift</h1>Das hier ist auch keine Liste, obwohl sie so aussehen mag
HTML:
<div>
1. Punkt 1
2. Punkt 2
3. Punkt 3
4. Punkt 4
</div>
HTML:
<ol>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
</ol>Syren Baran
Neues Mitglied
Was hast du immer mit deinem div?
Was ist denn daran falsch?
Was ist denn daran falsch?
Code:
<table>
<colgroup span="3"></colgroup>
<tr>
<td colspan="3"><h1>Das ist ne ganz normale Überschrift</h1></td>
</tr>
....
</table>_Thor_
Aktives Mitglied
Die Tabelle? Was spricht nur gegen
HTML:
<h1>Das ist ne ganz normale Überschrift</h1>Nicht nur, dass es den Quellcode unübersichtlicher macht, es vergrößert auch unnötiger Weise die zu übertragene Datei. Dein Code hat 130 Bytes, meiner nur 45 Bytes. Was das für eine komplette Seite bedeutet kannst du dir ja hochrechnen. Das dann mit der Anzahl der Seiten multiplizieren die pro Monat aufgerufen werden und du kommst bei einer normal besuchten Seite auf unmengen von überflüssigen Daten die übermittelt werden.
Denk nur mal an Browsergames. Ich möchte nicht wissen, wie viele Seitenaufrufe die momentan Beliebtesten haben, aber gehen wir nur mal von 100.000 aus (es werden deutlich mehr sein).
Dein Code würde ca. 12.4MB traffic produzieren, meiner nur 4MB. Und das alleine durch dieses kleine Beispiel. Jetzt nimm ne ganze Seite und die Aufrufe eines Games pro Tag. Kannst du dir in etwa vorstellen, wie sehr die Leitung unnötiger Weise beansprucht wird?
Space Vampire
Senior HTML'ler
Syren Baran
Neues Mitglied
Es ging um Tabellen vs Style Sheets.
Wo ist dein dazugehöriges Stylesheet?
Hast du das "...." gesehen?
Die Tabelle geht weiter, da hat man richtig schön einfach seine Navigation z.b. in der linken Spalte.
Muss ich jetzt einem Jungspund wir dir extra erklären, dass CSS erfunden wurde, weil Tabellen für komplizierte Layouts nicht ausreichten?
Das wurde früher ewig eingesetzt bevor es CSS gab und funktioniert auch heute noch wunderbar für simple Layouts. In der Regel auch mit weniger Bandbreite als mit Stylesheets.
The very young dont always seem to understand ... denk ich mir gerade.
Wo ist dein dazugehöriges Stylesheet?
Hast du das "...." gesehen?
Die Tabelle geht weiter, da hat man richtig schön einfach seine Navigation z.b. in der linken Spalte.
Muss ich jetzt einem Jungspund wir dir extra erklären, dass CSS erfunden wurde, weil Tabellen für komplizierte Layouts nicht ausreichten?
Das wurde früher ewig eingesetzt bevor es CSS gab und funktioniert auch heute noch wunderbar für simple Layouts. In der Regel auch mit weniger Bandbreite als mit Stylesheets.
The very young dont always seem to understand ... denk ich mir gerade.
_Thor_
Aktives Mitglied
Und ich hab dir aufgezeigt, warum Tabellen fürs Layout ungeeignet sind. Sie sind unübersichtlicher, produzieren mehr Traffic, sind schlechter anzupassen und semantisch falsch.
59 Bytes und wo ist deine Formatierung?
Code:
h1 {
font-size: 1.3em;
margin: 0;
padding: 1em;
}Ja, hab ich. Da kommen dann noch weitere, unnötige Zeilen und Zellen, die den Traffic weiter nach oben treiben.
Kann ich auch mit ner Liste und weniger Quellcode.
Falsch!
Stylesheets gab es schon bei dem allerersten Browser, den Tim Berner-Lee 1990 entwickelt hat. Die nachfolgenden Browserhersteller haben das Konzept nur nicht weiter verfolgt, wodurch die Autoren gezwungen waren, auf Tabellen als Layoutmittel zurückzugreifen. Stylesheets gab es also schon lange vor den Tabellen als Layoutmittel.
Da bist du falsch informiert.
Es mag ja funktionieren, ich kann auch mit nem Bobbycar auf der Autobahn fahren, gesund ist das aber nicht.
Das will ich sehen.
Du scheinst es nicht zu verstehen.
Syren Baran
Neues Mitglied
Du hast immer noch kein überzeugendes Argument gebracht warum z.B. ein h1 in einer Tabelle semantisch falsch ist.
Das trennt nicht Navigation vom "zentralen" Bereich.
"The first CSS specification to become an official W3C Recommendation is CSS level 1, published in December 1996."
Toll, es gab also Style Sheets schon länger, nur hat sie kein Browser unterstützt. Kein Wunder das stattdessen Tabellen verwendet wurden.
Ach so. Tabellen funktionieren. Sind aber nicht "gesund".
_Thor_
Aktives Mitglied
Doch, mehrfach. Tabellen zeichnen tabellarische Daten aus, was ist eine Überschrift?
Dann nimm stattdessen eben
Code:
ul {
float: left;
border: 1px solid black;
}Jetzt endlich unterstützen sie es, also kein Grund, weiter Tabellen als Layoutmittel zu verwenden.
Richtig, nicht wenn man sie für das Layout einsetzt.
Was ist, wenn du deine Navigation nicht mehr neben dem Inhalt, sondern über dem Inhalt haben willst? Dann musst du deine Tabelle ändern, die Spalte wo die Navigation drin ist, ist dann überflüssig, musst evtl colspans vergeben und irgendwo gibt es dann sicher fehler im Layout. Ich entferne einfach das float: left und hab es gleich für alle Seiten geändert, ohne den HTML-Code anfassen zu müssen.
sorry, wenn ich mich einmische, Alterchen, aber das ist erwiesenermaßen falsch.
Schon 1998 hat Tim Berners-Lee bzw. der W3C die Trennung von Inhalt und Layout gefordert.
Dafür wurde dann eigens CSS als Gestaltungssprache entwickelt.
Leider konnten die damaligen Browser mit CSS noch nix anfangen.
Was hat man sozusagen als Notlösung getan?? Dreimal darfst du raten!
Man hat mit Tabellen gestaltet, weil das die Browser verstanden haben. ;-)
Syren Baran
Neues Mitglied
Also wurde 1998 (eigentlich 1996) CSS erfunden, weil Tabellen für komplizierte Layouts nicht ausreichten. Und da wurde das noch lange nicht in Browsern umgesetzt.
Wo ist der Widerspruch zu dem was ich gesagt habe?
Syren Baran
Neues Mitglied
Eine Überschrift, ist per Definition das was zwischen <hn> und </hn> steht.
Süss. Für CSS brauch man immer nur ein paar Bytes. Warum brauchen die hier im Forum nur ne 56KB CSS?
Es ist einfach benutzen und lässt sich dynamisch oft einfacher aufbauen. Grund genug.
Dein float:left erledigt aber nur einen Bruchteil dessen, was die Tabelle leistet.
_Thor_
Aktives Mitglied
Richtig. Und was ist per Definition, was in einer Tabelle steht? Auch richtig, tabellarische Daten. Eine Überschrift fällt nicht in diese Kategorie.
Weil damit vielleicht alle Elemente formatiert sind und nicht nur ein kleines Beispiel? Trotzdem wird es nur einmal übertragen und liegt dann im Cache, während deine Tabellenstruktur jedesmal übertragen wird.
Na das zeig mir mal.
Was leistet deine Tabelle denn noch tolles?
Trennung von Inhalt und Layout hast du aber schon mal gehört, oder? Weißt du auch, was damit gemeint ist?
Wo ich dich zitiere ist der Widerspruch.
So wie du schreibst willst du entweder nur provozieren und dich daran ergötzen wie wir uns aufbrezeln, oder du bist so rechthaberisch, das du einem das Offensichtliche im Munde herumdrehst, nur um irgendwie Recht zu behalten.
Auf beides kann ich verzichten.
Space Vampire
Senior HTML'ler
mein Popcorn ist alle...und ich hab den drang mich hier mal kurz einzuschalten.
einerseits hab ich mich ja bekehren lassen, dass man tabellen nicht für layouts missbrauchen sollte...aber:
mir fällt auf anhieb eine sache ein, die man zwar mit tabellen aber nicht mit css realisieren kann.
Zumindest hab ich es nicht hinbekommen.
Folgendes Szenario:
Dreispaltiges Layout.
Alle drei Spalten sollen immer die gleiche höhe haben, egal welche gerade mehr Inhalt hat.
Spalte links und rechts haben grafische Hintergründe.
Bis hierhin kein Problem für css ohne Tabellen...
Jetzt möchte ich aber, dass die Spalten links und rechts sich je nach bedarf erweitern können und der jeweilige Hintergrund sich wie eine Schiebetür mitbewegt und natürlich die Ganze Spalte bis nach unten ausfüllt!
Ich habs ohne Tabellen hinbekommen, dass alle drei Spalten auf der gleichen höhe sind...aber nur mit starren Hintergrundgrafiken!
Ich habs ohne Tabellen hinbekommen, dass alle drei Hintergründe sich dynamisch verhalten...aber dann musste ich auf die gleiche Höhe verzichten!
Beide Efekte gleichzeitig sind auf wirklich simpelste Weise mit einer dreispaltigen Tabelle zu bewerkstelligen.
Ich gebe zu, dass es das einzige ist, was ich bisher mit CSS alleine nicht realisieren konnte...aber man sieht daran, dass es immer noch etwas gibt, was mit Tabellen realisierbar ist und mit CSS garnicht oder nur höchst umständlich!
einerseits hab ich mich ja bekehren lassen, dass man tabellen nicht für layouts missbrauchen sollte...aber:
mir fällt auf anhieb eine sache ein, die man zwar mit tabellen aber nicht mit css realisieren kann.
Zumindest hab ich es nicht hinbekommen.
Folgendes Szenario:
Dreispaltiges Layout.
Alle drei Spalten sollen immer die gleiche höhe haben, egal welche gerade mehr Inhalt hat.
Spalte links und rechts haben grafische Hintergründe.
Bis hierhin kein Problem für css ohne Tabellen...
Jetzt möchte ich aber, dass die Spalten links und rechts sich je nach bedarf erweitern können und der jeweilige Hintergrund sich wie eine Schiebetür mitbewegt und natürlich die Ganze Spalte bis nach unten ausfüllt!
Ich habs ohne Tabellen hinbekommen, dass alle drei Spalten auf der gleichen höhe sind...aber nur mit starren Hintergrundgrafiken!
Ich habs ohne Tabellen hinbekommen, dass alle drei Hintergründe sich dynamisch verhalten...aber dann musste ich auf die gleiche Höhe verzichten!
Beide Efekte gleichzeitig sind auf wirklich simpelste Weise mit einer dreispaltigen Tabelle zu bewerkstelligen.
Ich gebe zu, dass es das einzige ist, was ich bisher mit CSS alleine nicht realisieren konnte...aber man sieht daran, dass es immer noch etwas gibt, was mit Tabellen realisierbar ist und mit CSS garnicht oder nur höchst umständlich!
Syren Baran
Neues Mitglied
Also, ganz langsam zum mitschreiben.
Warum siehst du einen Widerspruch zwischen tabelarischem Datum und Überschrift?
Der Browser sieht da keinen Widerspruch.
Leider kein Opensource Projekt o.ä. Willst en Webserver sehen?
Ist getrennt. Wird nach Regeln dynamisch so gebaut, wie ich es gerne hätte. Oder meinst du, der Browser ist mir böse, wenn er es als einzelne Datei kriegt?
wieso sollte das nicht mit CSS gehen? :?
Was heißt Spalten erweitern? Ich nehme mal an vertikal, oder?
Für optisch gleichlange Spalten gibt es doch Faux Columns und für ein flexibles Layout Faux Columns Liquid.
