Warum sind Tabellen eigentlich "unhandlich"?

Beitrag von **800XE** » 10.02.2010, 01:05

ishmael hat geschrieben:
mgutt hat geschrieben: Die alten sind schneller. Sorry, hätte eigentlich gedacht, dass das klar wäre ^^

Wobei das natürlich subjektiv ist. Ein Benchmark habe ich noch nicht gemacht. Aber im Grunde wäre das eigentlich mal eine Idee. Die Seite cachen und als reines HTML/CSS benchmarken.
Genau so wie Du, habe ich keine Fakten zur Hand, behaupte aber mal, dass die Performance hauptsächlich durch Serverskripte, Datenbank-Einstellungen und Hardwareleistung beeinflusst wird. Das Rendering im Browser macht da nur ein Bruchteil von aus. Fakt ist, dass Tabellen erst vollständig geladen angezeigt werden, was für mich klar gegen Tabellen spricht.

Erkläre mir mal warum Serverseitiges das Scrolling langsamer macht?

DivSeiten haben bei mir manchmal arge Probleme beim Scrolling

von **Anzeige von ABAKUS** »

Beitrag von **mgutt** » 10.02.2010, 02:31

Jo. Das Ruckeln stelle ich auch ständig fest.

Übrigens habe ich mir mal die Mühe gemacht und alle mir bekannten Tricks umgesetzt, um eine Box ohne width-Angabe geshrinkt zentrieren zu können:
www.programmierer-forum.de/html/css-shr ... boxes.html

Neben table scheint display:table die Variante zu sein, die bei den meisten Browsern ohne großen Aufstand funktioniert. Ohne Validierung sogar sparsamer als table

Falls jemanden noch eine Variante einfällt immer her damit.

Beitrag von **800XE** » 10.02.2010, 03:53

was ist display:table?
view-source:https://de.selfhtml.org/css/eigenschaft ... splay2.htm
aha

Code: Alles auswählen

<div class="table">
 <div class="tr">
  <div class="td">ich</div>
  <div class="td">bin</div>
  <div class="td">eine</div>
  <div class="td">Tabelle</div>
 </div>
</div>

Damit wird der HTML-TAG4Table in eine CSSclass bzw ins style "Ausgelagert"

Toll ... find ich voll toll

Die CSSler (bzw DIVler, da es ja keine CSS Designs gibt, es gibt nur DIV und TableDesign und beide können ihre Elemente via CSS umvormen) Prädiger sagen doch immer CSSdesign (bzw NichtTableDesign) macht den Quelltext schlanker

Code: Alles auswählen

<div class="table">
 <div class="tr">
  <div class="td">ich</div>

= 67 Zeichen

Code: Alles auswählen

<table>
 <tr>
  <td>ich</td>

= 30 Zeichen

Fazit
Da wollte sich wohl ein DIVjünger auch von der letzten Bedüftigkeit (z.B. bei Tabellen ... z.B. Inventarliste, oder Statistik irgendwas) nach einer Tabelle von der HTML-Tabelle "befreien" und hat dann einfach was erfunden das dafür sort das der "DesignCode" um ca 50% anwächst .... bzw von HTML-Table zu DIVcssTable ist das Wachstum ja 100% = am Ende 200% Code in Relation

Damit müßte man jetzt gerade mal eine StatistikTabelle oder so in den Browser hauen ....
... ich glaube beim Scrollen würde da auch ein 8GigaHz Rechner in die Knie gehen

mgutt hat geschrieben:Jo. Das Ruckeln stelle ich auch ständig fest.

Ich vermute mal es ist vorlgendermasen

TableDesign wird auf ein virtuelles Papier gepixelt un das Scrollt dan
= alle Elemente werden zu einem "Bild"

Bei DivDesigns da sind die einzelnen COntainer eigenständig ...
... mir ist auch schon oft aufgefallen das beim Scrollen erstmal was fehlt ....
... da frag ich mich ob Nachgeladen wird oder ob das Rendern für diesen Bereich wegen "unnötigkeit da auserhalb des Bildschirmes" auf später verschoben wurde

Und die Anderen Objekte die springen einfach hin und her ...
... nicht gemeinsam sondern eben unabhängig verändern die ihre Position

Bei DivCOntainern ist es vermutlich wie bei einer WindowsGUI
(wie es bei Windows genau ist weis ich nicht, muß aber wohl ähnlich sein wie bei GEM ... z.B. Atari-GEM = Grafikal Enviroment Manager)
Dort gibt es für die Fenster, die ja Rechtecke sind wie DivCOntainer es sind, eine Rechteckliste
in dieser Recheckliste gibt es für das "GesamtRechteck" eines Objectes eventuell mehrere Teilrechtecke, weil das GesamtRechteck nicht komplett zu sehen ist
Nichtsichtbare Teile sind von einem Anderen Object überlagert

siehe .... z-index ... für HTML Elemente
oder ..... Div .. Position absolut

Also ....
... Bei Table ist alles flach ... der Code wird durchgerendert und auf "Papier" gepixelt
.... Bei Div können später nochmals Elemente kommen die auf einem Bereich der schon "bedruckt" ist erscheinen .... darum wird nicht das Papier gerendert sondern die einzelnen "Absätze" bzw "Blöcke"
Ergebniss
Table = die Renderengine wird 1 mal aufgerufen
Div = die Renderengine wird x mal aufgerufen, eventuell für einen Div sogar mehrfach wegen der Recheckliste da ein Anderer Div irgendwo darüber liegt .... und danach müßen die Boxen auf das Paier platziert weren .... wobei eventuell möglicherweise nachgerendert werden muß da erst jetzt festgestellt wird das da zu wenig Platz ist
Beispiel für Nachrenderung ....
Box wird gerendert, für 100% BIldbreite .... dann wird festgestellt das die neben eine Box Floatet, Sie also nur 600 der 800 Pixel breit sein darf

von **Anzeige von ABAKUS** »

Beitrag von **800XE** » 10.02.2010, 03:58

mgutt hat geschrieben:Jo. Das Ruckeln stelle ich auch ständig fest.

Bei mir könnte es ja der alte Atlon XP1800 sein ... in verbindung mit dem Galeon der nicht der neuste ist

Du hast doch bestimmt einen neueren Rechner und einen aktuellen FF?

Beitrag von **800XE** » 10.02.2010, 04:03

ishmael hat geschrieben:
mgutt hat geschrieben: Die alten sind schneller. Sorry, hätte eigentlich gedacht, dass das klar wäre ^^

Wobei das natürlich subjektiv ist. Ein Benchmark habe ich noch nicht gemacht. Aber im Grunde wäre das eigentlich mal eine Idee. Die Seite cachen und als reines HTML/CSS benchmarken.
Genau so wie Du, habe ich keine Fakten zur Hand, behaupte aber mal, dass die Performance hauptsächlich durch Serverskripte, Datenbank-Einstellungen und Hardwareleistung beeinflusst wird.

---requote----
ich keine Fakten zur Hand, behaupte aber mal,
------------------------

nix wissen aber was behaupten

ich hab dir ja oben was von Rechteckliste erzählt
für den Fall das du verstehst was ich erklärt habe
weisst du jetzt das es nicht so ist wie du behauptet hast

aber ich nehme mal eher an

Code: Alles auswählen

if &#40; $rechteckliste == $bahnhof &#41;
&#123;
  echo &#40; 'Ja, die Bahn kommt .....' &#41;;
&#125;

Beitrag von **Pheidippides** » 10.02.2010, 07:28

Mork vom Ork hat geschrieben:
Pheidippides hat geschrieben:Ich lege i.A. einen passenden Rahmen mit den benötigten Spalten mittels einer Tabelle fest. Wenn es nicht eine 08/15 Seite werden soll, kann man mit der Methode "Ich bin toll und verwende nur DIVs" unglaublich viel Zeit verplempern.
Wenn du mit CSS-Layout Zeit verplemperst, dann musst du einfach noch ein wenig üben (oder mal was anderes bauen als 08/15-Dreispalten-mit-Titelzeile-Seiten). Wer Auto fahren kann, kann ja auch nicht automatisch genauso gut einen LKW steuern. Daraus kann man aber nicht schließen, dass LKWs nutzlos sind.

Gehts noch? Ich glaube kaum dass du mir noch was beibringen würdest. Manche Leute sind hier so was arrogant, es ist nicht zu fassen.

Beitrag von **mgutt** » 10.02.2010, 11:50

800XE hat geschrieben:
mgutt hat geschrieben:Jo. Das Ruckeln stelle ich auch ständig fest.
Bei mir könnte es ja der alte Atlon XP1800 sein ... in verbindung mit dem Galeon der nicht der neuste ist

Du hast doch bestimmt einen neueren Rechner und einen aktuellen FF?

Ja Dual Core Schlag mich tot. Aber ich teste häufiger im IE, auch wenn jetzt viele sagen "wie kann man nur". Aber solange auch nur 5% einen bestimmten Browser nutzen, sehe ich das eben so, dass es darin problemlos laufen muss.

Und besonders bei FF ist das Problem, dass der auch immer weiter aufbläht, die Rechner aber parallel nicht schneller werden. Der FF2 war meiner Ansicht nach viel schneller als der FF3.

Allerdings muss ich an dieser Stelle Chrome loben. Der ist einfach pervers schnell und extra Anpassungen musste ich für den noch nie vornehmen.

Meine Theorie zum Ruckeln:
Der Browser verhält sich da genau wie Du sagst. Allerdings glaube ich, dass das Hauptproblem gar nicht die DIVs sind, sondern die Listen mit denen man auf Teufel komm raus versucht eine Tabelle zu simulieren bzw. Subdaten möglichst semantisch zu platzieren. Als Vorwand nimmt man dann gerne noch dazu, dass der einschließliche Einsatz von DIVs ja unprofessionell sei.

Nimm einfach mal eine horizontale Navigation. Eine vertikale Liste muss in ihrer Eigenschaft "gebrochen" werden, damit wirklich das passiert, was man eigentlich haben will. Eine DIV-Wüste würde den gleichen Effekt resultieren. Und ein table macht es sogar ohne Aufwand.

Ich selbst möchte keinen table, weile ich will, dass die Navigation bei niedrigen Fensterbreiten auf 2 und mehr Zeilen wächst. Das geht mit tables nicht. Warum man aber wie ein Kranker eine Navigation in ein DIV UL LI Konstrukt packen muss, obwohl man eh eine fixe Breite haben will, verstehe ich tatsächlich nicht.

Beitrag von **mgutt** » 10.02.2010, 12:00

800XE hat geschrieben:
Code: Alles auswählen
<div class="table">
 <div class="tr">
  <div class="td">ich</div>
= 67 Zeichen
Code: Alles auswählen
<table>
 <tr>
  <td>ich</td>
= 30 Zeichen

Beim table fehlen die Padding und Margin-Angaben, wenn man das Nullen will und so mit einem DIV vergleichen will. Und das DIV-Konstrukt hätte man denke ich auch verschachtelt ansprechen können, um sich die ganzen class'es zu sparen. Allerdings musst Du meiner Ansicht nach die gesamten CSS-Definitionen mitrechnen. Auch wenn sie ausgelagert sind, liegen sie ja ständig im RAM des Besuchers.

Und zuletzt darf man nicht vergessen, dass display:table erst ab IE8 funktioniert. Für die verherigen Browser muss man mit zoom:1 & display:inline eine Alternative schaffen, sonst sieht das so aus:
Bild

Ob man mit dem zoom:1 Konstrukt allerdings eine ganze Tabelle bauen kann, kann ich nicht sagen, weil ich es noch nie ausprobiert habe ^^

Beitrag von **Mork vom Ork** » 10.02.2010, 12:40

Pheidippides hat geschrieben:
Mork vom Ork hat geschrieben:
Pheidippides hat geschrieben:Ich lege i.A. einen passenden Rahmen mit den benötigten Spalten mittels einer Tabelle fest. Wenn es nicht eine 08/15 Seite werden soll, kann man mit der Methode "Ich bin toll und verwende nur DIVs" unglaublich viel Zeit verplempern.
Wenn du mit CSS-Layout Zeit verplemperst, dann musst du einfach noch ein wenig üben (oder mal was anderes bauen als 08/15-Dreispalten-mit-Titelzeile-Seiten).
Gehts noch? Ich glaube kaum dass du mir noch was beibringen würdest. Manche Leute sind hier so was arrogant, es ist nicht zu fassen.

Na, etwas ähnliches habe ich mir beim Lesen deiner Bemerkung auch gedacht, ging aber eher in die Richtung Das-habe-ich-immer-so-gemacht-das-geht-gar-nicht-anders-und-wer-was-anderes-behauptet-ist-doof-und-kann-nur-Scheisse :> Ohne Tabellen wären in angemessenem Zeitrahmen nur 08/15-Seiten möglich? Das ist schon für sich albern. Dann noch ausgerechnet mit dem Hinweis auf die „benötigten Spalten“ zu behaupten, mit Tabellen, dem Konstrukt fürs besagte Spaltenallerlei schlechthin, wäre mehr als nur 08/15 möglich, ist schon fast ein Widerspruch in sich.

Ob eine Seite beliebig aussieht oder nicht, hat erstmal etwas mit den Fähigkeiten des Gestalters zu tun, nicht mit der Technik darunter. Man kann mit Tabellen schöne Seiten bauen, man kann auch mit CSS schöne Seiten bauen, wohlgemerkt beides in einem bezahlbaren Zeitrahmen.

Dann gibt es sicherlich bei jeder Technik Einschränkungen, ich habe das weiter oben bereits bezüglich Webseiten/Papier geschrieben – aber das gilt für jede Technik, das gilt für CSS genauso wie für Tabellen. Wer wie du meint, B wäre gegenüber A unbrauchbarer, weil er mit B nicht das Gleiche hinbekommt, der kann mit B entweder nicht umgehen oder steckt in einem althergebrachten Schema fest anstatt sich mal für die Möglichkeiten, die nur B bietet, zu öffnen.

Beitrag von **mgutt** » 10.02.2010, 14:41

800XE hat geschrieben:
Code: Alles auswählen
<div class="table">
 <div class="tr">
  <div class="td">ich</div>
= 67 Zeichen
Code: Alles auswählen
<table>
 <tr>
  <td>ich</td>
= 30 Zeichen

Ich habe das mal ergänzt um eine Zeichenzählung:
https://www.programmierer-forum.de/html ... boxes.html

Es gilt aber zu bedenken, dass es keine Tabelle ist, die ich baue, sondern eine zentrierte shrink-to-fit Box.

Will man die XHTML-Validierung erfüllen, muss man entweder "<div><table>" nutzen oder aber "<div><div>" mit "display:table". Andere Varianten mit "display:inline-block" oder "float:left;left:50%" erscheinen mir unnötig aufwendig, weil dann mehr div's notwendig werden, um eine Abwärtskompatibilität zu gewährleisten.

Laut Browsershots scheinen alle meine getesteten Varianten in allen Browsern zu funktionieren:
http://browsershots.org/https://www.pro ... boxes.html

Beitrag von **800XE** » 10.02.2010, 16:51

mgutt hat geschrieben:Allerdings musst Du meiner Ansicht nach die gesamten CSS-Definitionen mitrechnen.

Auch wenn sie ausgelagert sind, liegen sie ja ständig im RAM des Besuchers.

Ja, im Ram schon ...
... aber die werden ja nicht mit jedem pageView durch die Leitung gejagt ...
... es geht ja um das "kleiner Quellcode = kurze Ladezeit"

Hier war die Tage ein Post (oder wars Anderes Forum)
wo die "noCache Pragma=0" Dinger kritisiert wurden, weil dann der Quellcode immer neu geladen werden muß, wobei in der Kritik glaub auch Bilder und so gemeint waren, was nicht der Fall ist
Ich hab die "Pragma=0" glaub überall drin und muß beim rumexperimentieren im css trotzdem "reload" klicken und die Bilde sind auch immer da

--- abschweif ende ------ Faden wieder aufnehm ---
--- ... es geht ja um das "kleiner Quellcode = kurze Ladezeit" ---
Wobei das ja am Ende bei DSL 2000 oder DSL 6000 oder 32ooo (KabelD fängt jetzt mit 100ooo an hab ich gelesen) eh egal ist .... die vielleicht 2 KiloByte

und zum Abschluß
meine Zählung ist doch etwas unfähr

Code: Alles auswählen

<div class="table">
 <div class="tr">
  <div class="tdar">123</div>
  <div class="tdal">Dings</div>
  <div class="tdac">soso</div>

Code: Alles auswählen

<table>
 <tr>
  <td class="ar">123</td>
  <td class="al">Dings</td>
  <td class="ac">soso</td>

Bei der DivVersion braucht es die class auf jedenfall, und dort noch ein
al=align left
ar=align right
ac=align center
in den Namen reinschreiben macht nicht viel

in der herkömmlichen Table muß dann erst die class noch dazugeschrieben werden und dann ist der Gewinn schon fast weg
und das man mache Spalte LinksBündig und eine Andere Rechtsbündig macht ist ja wohl nicht selten bzw eher schon normal

Beitrag von **Pfauli** » 10.02.2010, 17:24

mgutt hat geschrieben:
Laut Browsershots scheinen alle meine getesteten Varianten in allen Browsern zu funktionieren:
https://browsershots.org/https://www.pr ... boxes.html

Ich hatte auch immer gehofft, dass diese Browser-Shot Webseiten verlässlich sind ...
Bei mir im FF3 sind Deine Tabellen schon einmal seltsam.
https://666kb.com/i/bgl2kenau3itlyfq2.gif

Beitrag von **Mork vom Ork** » 10.02.2010, 18:08

Pfauli hat geschrieben:Ich hatte auch immer gehofft, dass diese Browser-Shot Webseiten verlässlich sind ...
Bei mir im FF3 sind Deine Tabellen schon einmal seltsam.

Was da bei dir auseinanderzufallen scheint, sind in der Praxis unsichtbare Hilfselemente, die er sich für die abstrusesten Konstruktionen ausgedacht hat. Wichtig ist, dass ein blauer zentrierter Kasten zu sehen ist.

Auch sonst ist der Vergleich fragwürdig. Da wird indirekt behauptet, Firefox kenne den >-Selektor nicht, deshalb müssten zusätzliche Korrekturen rein (Firefox konnte schon >, als er gewissermaßen noch im Netscape 7 steckte). Da werden in den CSS-Beispielen Zeichen mitgezählt, die in der Praxis auch bei Tabellenfreunden eh vorhanden sein dürften (<style>-Klammer), andere wiederum werden im tabellierten Paradebeispiel unterschlagen (das Elternelement des zu zentrierenden Blocks). Code, der nicht von allen Browsern geladen wird, sondern nur einem kleinen Teil (IE < 7), wird kommentarlos aufaddiert und die Fehler uralter Browser werden damit letztlich CSS zur Last gelegt.

Wer unbedingt auch grottenschlechte Browser grafisch 1:1 unterstützen möchte, sollte besser beim Tabellenlayout bleiben, da hat er in der Tat weniger Sorgen mit.
Es gibt hingegen auch die Möglichkeit, Browsern, die mit CSS nicht umgehen können, den CSS-Teil gänzlich vorzuenthalten. Jeder Browser kann anständig mit reinem HTML umgehen, das ist, wenn man es denn ordentlich gemacht und keine div-Wüste gebaut hat, genauso informativ wie eine grafisch aufgehübschte Seite – man muss sich nur trauen. Ein Großteil des Brimboriums, das hier gezeigt wurde, erübrigt sich damit.

Dass davon abgesehen CSS-basierte Seiten insgesamt in aller Regel deutlich weniger Gewicht als ihr Tabellengegenstück aufbringen, geht bei dieser extrem fokussierten Korinthenkackerei völlig unter. Hier werden mit einer Tabelle 200 Bytes eingespart, bei kompletten Webseiten ist hingegen die CSS-Version gerne auch um mehrere Kilobyte besser, je nach Komplexität.

Und sowas hier …

800XE hat geschrieben:
Code: Alles auswählen
<div class="table">
 <div class="tr">
  <div class="td">ich</div>
= 67 Zeichen
Code: Alles auswählen
<table>
 <tr>
  <td>ich</td>
= 30 Zeichen

… ist so, wie es da steht, kompletter Schwachsinn. Die korrekte Version wäre

<p>ich</p>

= 10 Zeichen.

Beitrag von **mgutt** » 10.02.2010, 20:29

Pfauli hat geschrieben:
mgutt hat geschrieben:
Laut Browsershots scheinen alle meine getesteten Varianten in allen Browsern zu funktionieren:
https://browsershots.org/https://www.pr ... boxes.html
Ich hatte auch immer gehofft, dass diese Browser-Shot Webseiten verlässlich sind ...
Bei mir im FF3 sind Deine Tabellen schon einmal seltsam.
https://666kb.com/i/bgl2kenau3itlyfq2.gif

Die Rahmen sind absichtlich platziert, damit man die Technik erkennen kann, mit der das DIV zentriert wurde. Wenn man das live einsetzt, setzt man bei diesem einen DIV natürlich kein Border ein.

Beitrag von **mgutt** » 10.02.2010, 20:31

Mork vom Ork hat geschrieben:geht bei dieser extrem fokussierten Korinthenkackerei völlig unter.

…

ist so, wie es da steht, kompletter Schwachsinn. Die korrekte Version wäre

<p>ich</p>

= 10 Zeichen.

Aber immerhin sind wir alle auf dem gleichen Niveau ^^