Tabelle: Rowspan mit Grid

[Innocentus]

Ich habe ein Tabellenzelle (TD).
Und dieser Tabellenzelle weise ich einen rowspan von 4 zu.
Dann okkupiert diese Tabellenzelle ja 4 Zeilen in der Tabellenspalte.

Nun möchte ich aber dennoch das Tabellenborder anzeigen.
Die Gitternetzlinien sollen also auch hier dargestellt werden.
HTML lässt das bei rowspans ja nicht so zu.

Kann man das irgendwie hinbekommen?

Oder könnte man - alternativ - den Text einer Tabellenzelle nach unten hin über die anderen Tabellenzellen überlappen lassen.
Dann muss ich keinen rowspan angeben und habe so auch ein Gitter.
Wäre aber sehr suboptimal.

Vielen Dank für eure freundliche Hilfe und Unterstützung!
Mit freundlichen Grüßen
Innocentus

 

[_Thor_]

Hast du denn tabellarische Daten, oder nutzt du die Tabelle fürs Layout?

Suboptimal ist es nämlich auch, Tabellen als Layoutmittel zu verwenden, denn dafür sind sie nicht gedacht. Sie sind dazu gedacht, tabellarische Daten auszuzeichnen (Statistiken, TV-Programm, Ergebnisse von Spieltagen...).

Was du vor hast geht meines Wissens nach nicht. Verzichte lieber auf die Tabelle als Layoutmittel, zeichne deinen Inhalt semantisch korrekt aus und mach das Layout mit CSS.

Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel

Warum Layout mit Tabellen dumm ist: Probleme definiert, Lösungen angeboten

Erlernen Sie HTML und CSS - Kostenlose Tutorials - Erstellen Sie Ihre eigene Webseite | HTML.net

 

[sysop]

....
Nun möchte ich aber dennoch das Tabellenborder anzeigen.
Die Gitternetzlinien sollen also auch hier dargestellt werden.
HTML lässt das bei rowspans ja nicht so zu....

bitte wie ?

<table border="1"> sollte dich eines besseren belehren. schöner ist es natürlich, der tabelle ein class="tralala" zuzuordnen und alles im stylesheet zu machen.

 

[Innocentus]

Es handelt sich hierbei um einen Kalender.
Die Spalten entsprechen den Tagen und die Zeilen den Stunden.

Da eine im Kalender eingetragene Aktivität länger als eine Stunde laufen kann,
wird diese mit einem rowspan über mehrere Stunden gestreckt.
Denn nur dann kann ich auch längeren Text dort einsetzen.

Mit freundlichen Grüßen
Innocentus

 

[_Thor_]

Dann ist es doch auch sinnvoll, den Bereich ohne Linien anzeigen zu lassen, damit gleich ersichtlich ist, dass dieser Termin über mehrere Zeiteinheiten geht.

 

[Innocentus]

Es ist schon richtig, was Du vorschlägst.

Aber ich möchte diese Trennlinien nur schwach andeuten,
also ganz schwach und grau.



Falls das so nicht gehen sollte, dann würde ich diesen Kalender mit DIVs darstellen.
Dann muss ich aber wissen, ob das wenigstens mit DIVs hinhaut.
Und wie sieht es dann mit dem ausdrucken und dem InternetExplorer (8,7,6) aus?


Vielen Dank für eure Antworten im Vorraus!
Mit freundlichen Grüßen
Innocentus

 

[_Thor_]

Es ist schon richtig, was Du vorschlägst.

Aber ich möchte diese Trennlinien nur schwach andeuten,
also ganz schwach und grau.

Da es sich aber nur um eine Zelle handelt, die sich über mehrere Zeilen erstreckt, wirst du keine Trennlinien bekommen, jedenfalls nicht, ohne ein paar Umwege.
Was du probieren könntest, wäre eine Liste in die Zelle einzufügen, den Listenelementen einen Rahmen geben und die Höhe an die anderen Zellen anpassen. Aber ich würde es garnicht erst versuchen.

Falls das so nicht gehen sollte, dann würde ich diesen Kalender mit DIVs darstellen.

Das wäre der falsche Weg, da es sich hierbei tatsächlich mal um tabellarische Daten handelt, die dem entsprechend auch in eine Tabelle gehören.

Dann muss ich aber wissen, ob das wenigstens mit DIVs hinhaut.

Sicher, irgendwie und nicht im Sinne von HTML.

Und wie sieht es dann mit dem ausdrucken und dem InternetExplorer (8,7,6) aus?

Vermutlich sehr viel schlechter, als mit der Tabelle.

 

[sysop]

ich stehe immernoch auf'm schlauch.
soll nur die (rowspan)zelle umrandet werden ?
ein div nur in dieser zelle könnte dann die lösung sein.

ich bekomme das für mich opisch nicht gebacken, wie es nun aussehen soll.

 

[Maxi]

Du könntest die Zellen einfach nicht mit rowspan verbinden und den Tabellenzellen der belegten Termine eine andere Klasse geben.
Die dann mit CSS entsprechend formatieren und fertig.

 

[Bernhard]

Ich bin mir auch nicht ganz sicher, ob ich Innocentus richtig verstanden habe...

Falls ich ihn aber richtig verstanden habe, dann geht das sicher nur auf dem
Umweg, dem Text eine Border zu geben, die so aussieht, als sei es der Rahmen
der im Hintergrund liegenden Tabellenzelle: http://www.css4you.de/trickkiste/tr00001.html

Grüße
Bernhard

 

[Innocentus]

So soll das aussehen:

Wie ihr sehen könnt, hat die oberste Zelle ganz rechts einen rowspan von 3.
Ich habe in dem Bild oben zwei schwache, graue Linien angedeutet.
So soll das auch in echt - also in HTML - aussehen.

Die Tabellenbreite und Höhe wurde übrigens in Prozent angegeben,
damit sie sich selbstständig an die Breite und Höhe des Browserviewports anpasst.

Mit freundlichen Grüßen
Innocentus

 

[Efchen]

Maxi hat Dir schon die richtige Antwort gegeben.

 

[Junny]

Maxi hat Dir schon die richtige Antwort gegeben.

Meinst Du diese hier?

Du könntest die Zellen einfach nicht mit rowspan verbinden und den Tabellenzellen der belegten Termine eine andere Klasse geben.
Die dann mit CSS entsprechend formatieren und fertig.

Die verstehe ich ehrlich gesagt auch nicht. Welche Formatierungen sollen für die belegten Termine gemacht werden?

Schreibe heute Nachmittag ansonsten mal eine andere Idee, muss erstmal los.

Gruß
Junny

 

[Maxi]

Welche Formatierungen sollen für die belegten Termine gemacht werden?

vielleicht hellere und anders farbige Rahmen, so wie es hier gesucht wird?

 

[Innocentus]

Ein Termin kann mehrere Stunden einnehmen - also Zeilen (denn Zeilen = Stunden).
Dann sieht man aber keine Trennlinien mehr.
Die soll man aber trotz des rowspans sehen können.

Vielen Dank für eure freundliche Hilfe und Unterstützung!
Mit freundlichen Grüßen
Innocentus

 

[Maxi]

Ein Termin kann mehrere Stunden einnehmen - also Zeilen (denn Zeilen = Stunden).
Dann sieht man aber keine Trennlinien mehr.
Die soll man aber trotz des rowspans sehen können.

Dann lass doch den Rowspan sein und versuchs mal so, wie ichs dir schon auf der ersten Seite beschrieben habe...

 

[Innocentus]

Wie muss denn dann die Klasse dazu aussehen?
Das ganze muss ja nicht nur überlappen,
sondern gleichzeitig müssen die dahinterliegenden Zellen unsichtbar werden.

Mit freundlichen Grüßen
Innocentus

 

[sysop]

Wie muss denn dann die Klasse dazu aussehen?
Das ganze muss ja nicht nur überlappen,
sondern gleichzeitig müssen die dahinterliegenden Zellen unsichtbar werden.

Mit freundlichen Grüßen
Innocentus

wenn die zeilenhöhen der tabelle dynamisch erstellt werden, hast du ein problem, du musst die linien die mit css generiert werden dann errechnen (mit pixlen rechnen ist heftig, sonst sind die linien nicht fortlaufend sondern stehen irgendwo)

sind die zeilen immer in der selben höhe, kannst du ja eventuell auch in der rowspan zelle eine grafik laden.

ich sehe das auch so, dass du die rowspans weg lässt, die rahmenlinien per css anpasst und den text selber mittels eines divs über die tabelle (deine drei zellen) legst.

 

[Innocentus]

Aber wie bekomme ich den Text im DIV im obersten TD dazu,
auch über die anderen, darunterliegenden TDs zu überlappen?

Overflow alleine reicht da doch nicht aus, oder?

Mit freundlichen Grüßen
Innocentus

 

[sysop]

nicht im td (also ein <td><div>), sondern die tabelle komplett anzeigen und danach einen separaten div, den du per css an die gewünschte stelle plazierst (ein vorteil der divs, ist ja, dass man sie frei plazieren kann).

das setzt allerdings voraus, dass deine tabelle eben fest in der grösse und nicht dynamisch ist.