Gernot Back: Fixe Tabellenzeilen und -spalten

Beitrag lesen

Hallo Markus,

ja genau! So soll das aussehen.
Leider kann ich nicht genau nachvollziehen, wie das gemacht wurde.
Kann mir das bitte einer erläutern?

Die Erläuterung wird ein längerer Feature-Artikel sein, der in Arbeit, aber noch nicht veröffentlicht ist, da muss ich dich noch eine Weile vertrösten, denn das würde hier zu weit führen, es im Einzelnen zu erläutern.

Wenn du es aber eilig mit der Umsetzung deines Projektes hast, kannst dir aber schon einmal meine Datei "frameset.html" abspeichern. Da sind auch die meisten Javascripts direkt eingebunden.

http://www.sprachlernspiele.de/anzeige2/frameset.html
Außerdem solltest du dir folgende Datei im selben Ordner abspeichern:
http://www.sprachlernspiele.de/anzeige2/leer.html

Aus der Datei
view-source:http://www.sprachlernspiele.de/anzeige2/tabelle.html
brauchst du nur den Skript-Bereich, den du dann bei deiner Datei mit der Tabelle im Head-Bereich einfügst.
Außerdem umschließt du den gesamten Inhalt des Body-Bereichs mit einem DIV-Element. Am Anfang schreibst du also:

<body onScroll="parent.scrollen()" onmouseover="parent.aktFrame=window.name;">
<div id="cont" style="position:absolute">

und am Ende natürlich

</div>
</body>.

Deine so veränderte Tabelle bindest du dann viermal als src="deineTabelle.html" in meine Datei "frameset.html" ein, die du dir ja vorher abgespeichert hast.

Außerdem musst du dort evtl. die Werte für marginwidth und marginheight und in der Funktion init() die Pixelwerte für das Verschieben der ersten Tabellenspalte und der ersten Tabellenzeile anpassen. Wenn du diese erst einmal alle auf 0 setzt, wird gar nicht verschoben und du siehst beides doppelt, d.h. in jeweils zwei Frames. Dann tastest du dich langsam an den entsprechenden negativen Wert heran, indem du die erste Tabellenzeile- und -spalte immer weiter nach oben bzw. links in einen nicht sichtbaren Bereich verschiebst. (Das ist genau das, was bei Detlefs Version automatisch geht, wenn du alle Zellen in der ersten Zeile mit TH-Elementen ausgezeichnet hast.)

Wenn du deine Tabelle allerdings vorher aus Excel exportiert hast, kann es sein, dass einige Browser aufgrund des Datenumfangs schon bei der Neuberechnung der Positionen im Frame unten rechts schlapp machen, geschweige denn beim späteren koordinierten Scrollen.

HTML-Tidy erbrachte nur eine Einsparung von 16% und reichte da nicht aus. Deshalb habe ich einige Anstrengungen unternommen, um den aufgeblähten Excel-Quellcode von Hand zu säubern, wodurch die Dateigröße auf ein Zwölftel geschrumpft ist. Das habe ich v.a. dadurch erreicht, dass ich die 53 Zellen in jeder Zeile meiner Tabelle mit dem colspan-Attribut auf maximal 4 Zellen pro Zeile zusammengefasst und die für die Übersichtlichkeit wichtigen Zellenbegrenzungslinien mit einer Hintergrundkachel imitiert habe.

Gruß Gernot