HTML Tabelle Performance Unterschied?

[Matrix316]

Macht es eigentlich einen Unterschied, ob ich eine Tabelle mit 3 Zeilen habe, oder drei Tabellen mit einer Zeile?


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



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


Außer, dass der Code ein wenig größer wird?

[petersenk]

Ja, es macht einen (semantischen) Unterschied.
Hast du nun eine Tabelle oder deren drei?

Was das mit Performance zu tun haben soll? Gut, mach ein Browser braucht die Tabelle ganz im DOM, bevor er sie anzeigen kann. Bin mir aber einerseits gar nicht sicher, ob das bei modernen Browsern auch noch zutrifft, und andererseits; ist ja wohl völlig pillepalle. Hauptsache dein Dokument ist wohl strukturiert. :|

[Matrix316]

Mir gehts nur drum, dass ich eine ziemlich komplexe Tabelle machen will und wenn ich für jede Zeile eine eigene Tabelle mache, brauch ich mich nicht mit Colspan rumschlagen.

Wenn ich dagegen das alles in eine Tabelle mache, und will nachträglich was ändern...

[petersenk]

Ach.. vonwegen Performance.. Zu faul für anständiges Markup bist, wa? :D

Auch wenn's umständlich erscheint... Colspan ist nun wirklich keine Hexerei. Also mach die Tabelle richtig und keinen Pfusch. Meinen Segen geb ich dir jedenfalls nicht zu letzterem. :)

Machst die Tabelle eigentlich von Hand oder schreibst n'Script, welches dir die Tabelle erzeugt? Nuja, auch egal...

[Matrix316]

Von Hand, weil dynamische Sachen bei ASP.NET zum Teil richtig umständlich zu handlen sind. Vor allem, wenn ich noch dies und das mit Textboxen anstellen will, die in dieser Tabelle sein werden. :)

Auch habe ich festgestellt, dass umfangreiche HTML Tabellen im Visual Studio 2008 Designer sehr sehr langsam reagieren.

[DanMan]

Von Hand...
Wo ist dann das Problem? Kompliziert wirds nur, wenn du Tabellen per Server-Skript ausgibst, die mit rowspan arbeiten - das ist Mindfuck. Aber per Hand ein paar Tabellen....

Machs einfach richtig, also semantisch. Fürs Design gibts <div>s, für Tabellen <table>.

[Matrix316]

Ein komplexeres Tabellenlayout mit DIVs ist aber auch ziemlicher Mindfuck.

[Matrix316]

Mal nachgefragt: Wie würdet ihr so ein Layout angehen, wobei in die größeren Lücken Textboxen rein sollen. Die Abstände der Zeilen sollen in etwa gleich groß sein und es können auch noch ein paar Zeilen mehr sein:

http://www.abload.de/img/tabellelpb8.jpg (http://www.abload.de/image.php?img=tabellelpb8.jpg)

[petersenk]

Das soll ein "Layout" sein? Oder ist schlicht die Skizze zu schlecht?

Lektüre: z.B. Grid systems/Raster systeme von Müller-Brockmann
Und dann gibts einige interessante Ansätze, wie man ein Rastersystem im Web umsetzen kann - ganz ohne Tabellen. Google ist dein Freund.

Zu den vertikalen Abständen: da sollte es eigentlich reichen, wenn du einen anständigen vertikalen Rhythmus hinbekommst. Exakt gleiche Höhe der Zeilen wird bei variablem Inhalt wohl kaum machbar sein. Ist aber auch gar nicht notwendig, um ein ansprechendes Resultat zu erhalten.

[Matrix316]

Ja so ähnlich sieht das Layout aus. Ist natürlich nur eine Skizze. Nämlich um genau zu sein so:

http://www.abload.de/img/zulassungsbescheinigunrfkm.gif (http://www.abload.de/image.php?img=zulassungsbescheinigunrfkm.gif)

;)

Und dadurch, dass die Spalten nicht gleichmäßig sind, müsste die Tabelle mit der kleinsten Spaltenbreite aufgebaut werden und dann mit Colspan...

Mit Divs hab ichs schon probiert, aber die kleinen Zeilen und Spalten, machen das Layout mit DIVs auch nicht schöner. Ich habe jetzt das ganze außen Rum mit 4 DIVs grob aufgabaut und dann innen drin die beiden rechten Tabellen mit HTML Tabellen aufgebaut. Mit jeweils einer Tabelle pro Zeile. Man kann halt mit einer Tabelle nicht sagen, die erste Zeile hat 6 Spalten und die da drunter 4. Man müsste theorerisch sagen, jede Zeile hat grundsätzlich 40 Spalten oder so und müsste sich dann die Zeilen jeweils mit Colspan rausmeißeln...:ugly: Mit einer Spalte pro Zeile aber, kann ich wirklich sagen, die erste Zeile hat 6 und die zweite 4 spalten.

[fdk]

lass den krampf mit den tabellen, das artet nur in pixelschubsen aus; wie schon gesagt wurde gibt es zich / hunderte verschiedene vorbauten zu einem grid-layout wenn dir der Aufwand zum selbstbauen zu hoch ist. Damit stückelst du dir die Seite klein genug um alle Spalten akkurat abzubilden. fertig.

derpxample (http://www.blueprintcss.org/tests/parts/grid.html)

[DanMan]

Ja so ähnlich sieht das Layout aus. Ist natürlich nur eine Skizze. Nämlich um genau zu sein so:

http://www.abload.de/img/zulassungsbescheinigunrfkm.gif (http://www.abload.de/image.php?img=zulassungsbescheinigunrfkm.gif)

;)

Und dadurch, dass die Spalten nicht gleichmäßig sind, müsste die Tabelle mit der kleinsten Spaltenbreite aufgebaut werden und dann mit Colspan...

Mit Divs hab ichs schon probiert, aber die kleinen Zeilen und Spalten, machen das Layout mit DIVs auch nicht schöner. Ich habe jetzt das ganze außen Rum mit 4 DIVs grob aufgabaut und dann innen drin die beiden rechten Tabellen mit HTML Tabellen aufgebaut. Mit jeweils einer Tabelle pro Zeile. Man kann halt mit einer Tabelle nicht sagen, die erste Zeile hat 6 Spalten und die da drunter 4. Man müsste theorerisch sagen, jede Zeile hat grundsätzlich 40 Spalten oder so und müsste sich dann die Zeilen jeweils mit Colspan rausmeißeln...:ugly: Mit einer Spalte pro Zeile aber, kann ich wirklich sagen, die erste Zeile hat 6 und die zweite 4 spalten.
In dem Fall kann man durchaus eine Tabelle mit 14 Spalten für alles nehmen. Die Felder, die über mehrere Spalten gehen fasst du mit colspan zusammen. Die restlichen Abstände machst du per margin und/oder padding.

[Matrix316]

Den Code will ich sehen - da reicht schon ein Beispiel für die ersten drei Zeilen oben in der Mitte...=)

[DanMan]

Den Code will ich sehen - da reicht schon ein Beispiel für die ersten drei Zeilen oben in der Mitte...=)
Was gibts da zu sehen? http://jsbin.com/ayebuf

[Matrix316]

Naja, das Layout geht ja noch, weil dort im Prinzip die Spalten in der zweiten Zeile direkt drüber auch Spalten haben und nicht so viel "asymetrisch" ist.

Wie würdest du denn sowas hier am effektivsten mit einer Tabelle machen?

http://www.abload.de/img/xxx8c6t.jpg (http://www.abload.de/image.php?img=xxx8c6t.jpg)

[DanMan]

Wie würdest du denn sowas hier am effektivsten mit einer Tabelle machen?

http://www.abload.de/img/xxx8c6t.jpg (http://www.abload.de/image.php?img=xxx8c6t.jpg)
Wenns genau so aussehen muss, gar nicht, sondern aus 2 Tabellen.

[Matrix316]

Siehste...;) Genau das mach ich. ;)

[AlecWhite]

Ganz ehrlich: Wenn es dir nicht unbedingt auf perfektes Markup ankommt, mach das was für dich einfacher ist, für 99,9% aller Browser ist völlig egal.

Alles andere ist nun wirklich Diskussion, um 'nen Furz.

[Binaermensch]

Den Code will ich sehen - da reicht schon ein Beispiel für die ersten drei Zeilen oben in der Mitte...=)http://jsbin.com/ukariv/2/

Habe jetzt nur die ersten zwei (anstatt der ersten drei) umgesetzt – das Prinzip sollte aber dennoch klar sein. Formatiert muss das alles natürlich noch werden, zumindest das Markup sollte aber so passen.*

Beachte anhand Spalte #9 dass auch rowspan tadellos zu funktionieren scheint. Das wird für die linke Randspalte welche sich über die Zeilen 5/6/7/8 erstreckt noch interessant sein.

Ganz interessant ist, dass das alles ohne die Überschriftstabellenzeile (bzw. ohne eine Zeile welche ohne colspan auskommt) zumindest in meinem OSX-Firefox nicht zu funktioneren scheint. Zumindest in der Theorie sollte es das aber – die Gesamtzahl der Spalten lässt sich auch aus den restlichen Tabellenzeilen berechnen. Ich frage mich ob das nicht vlt ein Bug ist. :|

*Für die zwei Zeilen zumindest. Wenn du die ganze Zulassungsbescheinigung umsetzen willst, wirst du die Spaltenanzahl natürlich noch annpassen müssen.

[Binaermensch]

Noch ein paar Anmerkungen:

1.
Ich finde es toll dass du das in HTML umsetzen willst... Die meisten hätten das wahrscheinlich ohne lang nachzudenken mit einer Festbreitenschriftart gelöst, und die Abstände mit Leerzeichen aufgefüllt. Oder, noch schlimmer, eine Grafikbibliothek oder etwas anderes zweckentfremdet. Uaargh.

2.
Ich denke nicht dass du dir bzgl der Performance sorgen zu machen brauchst. Tabellen (auch komplexere mit verbundenen Zellen u. Ä.) gehören wie du weißt zu den absoluten Grundlagen die ein Browser schon seit jeher beherrschen muss – die betreffenden Codeteile werden wohl bis zum Erbrechen optimiert sein. Sage ich jetzt einfach mal so – konkrete Zahlen habe ich aber auch nicht. Würde mich aber stark wundern wenn's nicht so wär...

3.
jsbin.com ist ja eine tolle Seite. Kannte ich garnicht. Danke dafür, DanMan!

[ezzemm]

Ausser der Semantik und der Cross-Browser-Kompatibilität sollte die Seite ja auch für dich einfach editierbar und überschaubar sein. Ich persönlich hasse verschachtelte Tabellen, deswegen würde ich mit einer Kombination aus Liste und einer Tabelle pro Zeile arbeiten. Ist auch leichter dann mit jQuery Zugriff auf die einzelnen Reihen zu erhalten.


<ul>
<li>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</li>
<li>
<table>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</li>
</ul>

[Matrix316]

Och, jQuery brauch ich net, da ich mit ASP.NET eh Zugriff auf die Textboxen habe, die dort in die Tabelle reinkommen werden. Das ist kein Problem.

Noch ein paar Anmerkungen:

1.
Ich finde es toll dass du das in HTML umsetzen willst... Die meisten hätten das wahrscheinlich ohne lang nachzudenken mit einer Festbreitenschriftart gelöst, und die Abstände mit Leerzeichen aufgefüllt. Oder, noch schlimmer, eine Grafikbibliothek oder etwas anderes zweckentfremdet. Uaargh.

2.
Ich denke nicht dass du dir bzgl der Performance sorgen zu machen brauchst. Tabellen (auch komplexere mit verbundenen Zellen u. Ä.) gehören wie du weißt zu den absoluten Grundlagen die ein Browser schon seit jeher beherrschen muss – die betreffenden Codeteile werden wohl bis zum Erbrechen optimiert sein. Sage ich jetzt einfach mal so – konkrete Zahlen habe ich aber auch nicht. Würde mich aber stark wundern wenn's nicht so wär...
[...]

1. Naja, arbeite sowieso mit ASP.NET, da ist HTML nicht weit. ;) Das knifflige ist, dass das Dokument im Hintergrund sein soll und ich die Zeilen und Spalten und Textboxen daran anpassen muss...

2. Das ist gut. :)

[Binaermensch]

Ich fürchte ich hab's noch immer nicht ganz verstanden. Das Dokument muss im Hintergrund sein? Wie das? Und welche Textboxen? Formular-Textboxen?

Ich hatte eigtl gedacht das mit dem von mir geposteten HTML-Quelltext dein Problem gelöst wäre. Dem scheint jedoch nicht so zu sein...

[Matrix316]

Also es soll im Hintergrund das "Formular" zu sehen sein (wird als Hintergrundimage eines ASP : Panels eingerichtet) und im Vordergrund sollen quasi unsichtbare (ASP) Textboxen direkt über dem Formular abgebildet werden, so dass man da reinschreiben kann.

Das ganze ist in einer ASP.NET Webanwendung. Und auch nur Teil 1 des Puzzels, weil da noch andere Dokumente kommen werden. ;)

[petersenk]

Also ehrlich gesagt bist du IMHO völlig auf dem Holzweg. Nun wissen wir ja, dass du die hier (http://www.forum-3dcenter.org/vbulletin/showpost.php?p=8898126) verlinkte "Tabelle" nachbilden willst. Muss das denn wirklich 1:1 übernommen werden? Ist das so ne alberne Vorgabe vom Chef? Damit jedes Dummbrot das Formular bedienen kann (gut, da könnte in der Tat was dran sein; wohl einfacher zum blinden Abtippen)?

Der Punkt ist doch der: die ursprüngliche Tabelle ist doch nur desshalb so völlig beschissen aufgebaut - man siehe sich schon nur die Labels/Pfeile an, die notwendig sind, um die Daten lesen zu können - weil das gute Teil auf ein endliches Stück Papier gepappt wird.
Du hingegen willst ein Online-Formular anbieten; dir steht soviel Platz zur Verfügung wie du willst...

Hast du also schon mal darüber nachgedacht, die Tabelle vernünftig und an das gegebene Medium angepasst, aufzubereiten? Ohne Pfeil-Labels (oder noch schlimmer Tool-Tips), sondern ganz klassisch und übersichtlich?

[Matrix316]

Also ehrlich gesagt bist du IMHO völlig auf dem Holzweg. Nun wissen wir ja, dass du die hier (http://www.forum-3dcenter.org/vbulletin/showpost.php?p=8898126) verlinkte "Tabelle" nachbilden willst. Muss das denn wirklich 1:1 übernommen werden? Ist das so ne alberne Vorgabe vom Chef? Damit jedes Dummbrot das Formular bedienen kann (gut, da könnte in der Tat was dran sein; wohl einfacher zum blinden Abtippen)?

So siehts aus - zum Teil jedenfalls. ;) Alle Textboxen sollen auch noch zusätzlich ganz normal in einer Tabelle da sein. Die beiden sollen sich dann gegenseitig aufbauen. Also wenn du in dem Schein was eingibst, erscheint es oben und umgekehrt...

Im Prinzip soll das so sein, damit jeder Dummbrot das Formular bedienen kann. :redface:

Der Punkt ist doch der: die ursprüngliche Tabelle ist doch nur desshalb so völlig beschissen aufgebaut - man siehe sich schon nur die Labels/Pfeile an, die notwendig sind, um die Daten lesen zu können - weil das gute Teil auf ein endliches Stück Papier gepappt wird.
Du hingegen willst ein Online-Formular anbieten; dir steht soviel Platz zur Verfügung wie du willst...

Nicht, wenn das Stück Papier als Hintergrund hingemacht werden soll...

Hast du also schon mal darüber nachgedacht, die Tabelle vernünftig und an das gegebene Medium angepasst, aufzubereiten? Ohne Pfeil-Labels (oder noch schlimmer Tool-Tips), sondern ganz klassisch und übersichtlich?
siehe oben - die Variante kommt über den Schein. ;)

[DanMan]

Siehste...;) Genau das mach ich. ;)
So lange du die einzelnen Tabellen für die Zeilen dann nicht noch in eine große tabelle packst, geht das in Ordnung mMn.

[Matrix316]

Könnte ich machen...;) aber die sind in einem großen Div jeweils für die einzelnen Blöcke.