Tabellen mehrspaltig gestalten

[Murphy]

Hallo Forum,

ich habe eine etwas merkwürdige Frage, denn ich würde Tabellen gerne mehrspaltig gestalten, aber ich weiß nicht wonach ich googeln soll, weil "mehrspaltig" bei Tabellen immer zu Suchergebnissen führt, die trivial sind.

Ich versuche mal grafisch deutlich zu machen, worauf ich hinaus will; gegeben sei folgende Tabelle:
X Y Z
1 2 3
4 5 6
7 8 9
A B C
D E F
G H I

Im HTML-Code würde sie ungefähr so aussehen:

  
<table>  
<tr><th>X</th><th>Y</th><th>Z</th></tr>  
<tr><td>1</td><td>2</td><td>3</td></tr>  
<tr><td>4</td><td>5</td><td>6</td></tr>  
usw.  
<tr><td>G</td><td>H</td><td>I</td></tr>  
</table>  

Da die Tabelle deutlich höher ist als breit, würde ich nun gerne mit CSS (also ohne den HTML-Code zu ändern) folgende Darstellung erreichen:

(zweispaltig)
X Y Z    X Y Z
1 2 3    A B C
4 5 6    D E F
7 8 9    G H I

(dreispaltig)
X Y Z    X Y Z    X Y Z
1 2 3    7 8 9    D E F
4 5 6    A B C    G H I

Die Tabelle soll ihre Daten also so darstellen, dass die Breite effizienter genutzt wird, ohne das die logische Struktur (festgelegt im HTML) irgendwie geändert werden müsste.

Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist, aber vielleicht gibt es ja doch eine Lösung, oder einen Hinweis, der mir weiter hilft.

[Auge]

Hallo

Ich versuche mal grafisch deutlich zu machen, worauf ich hinaus will; gegeben sei folgende Tabelle:
X Y Z
1 2 3
4 5 6
7 8 9
A B C
D E F
G H I

Im HTML-Code würde sie ungefähr so aussehen:

<table>
<tr><th>X</th><th>Y</th><th>Z</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
usw.
<tr><td>G</td><td>H</td><td>I</td></tr>
</table>

>   
> Da die Tabelle deutlich höher ist als breit, würde ich nun gerne mit CSS (also ohne den HTML-Code zu ändern) folgende Darstellung erreichen:  
>   
> (zweispaltig)  
> X Y Z    X Y Z  
> 1 2 3    A B C  
> 4 5 6    D E F  
> 7 8 9    G H I  
>   
> (dreispaltig)  
> X Y Z    X Y Z    X Y Z  
> 1 2 3    7 8 9    D E F  
> 4 5 6    A B C    G H I  
>   
> Die Tabelle soll ihre Daten also so darstellen, dass die Breite effizienter genutzt wird, ohne das die logische Struktur (festgelegt im HTML) irgendwie geändert werden müsste.  
>   
> Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist, aber vielleicht gibt es ja doch eine Lösung, oder einen Hinweis, der mir weiter hilft.  
  
Mit HTML und CSS alleine ist das nicht machbar. Serverseitig könntest du den HTML-Code so, wie du ihn brauchst, zusammenstöpseln, wenn, ja wenn du die Ausmaße des Browserfensters in Kombination mit der konkret verwendeten Schriftgröße kenntest. Die Daten könntest du mind. einen Request vorher, per JavaScript ermittelt, übergeben.  
  
Dann kannst du das aber auch gleich ganz lokal im Browser in JavaScript erledigen. Platz und Schriftgrößen ermitteln, Inhalte der Tabelle auslesen, neue Tabellen zusammensetzen und in das DOM einbauen.  
  
Allerdings ist, egal, wie du es angehst, eines zu beachten. Die Inhalte in der Tabelle bestehen (vermutlich) aus in Beziehung zueinander stehenden Daten. Diesen Zusammenhang zerreißt du natürlich, wenn du die Daten auf mehrere Tabellen verteilst.  
  
Tschö, Auge  

-- 
Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.  
Terry Pratchett, "Wachen! Wachen!"  
  
ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}  
  
[Veranstaltungsdatenbank Vdb 0.3](http://termindbase.auge8472.de/)

[Murphy]

Mit HTML und CSS alleine ist das nicht machbar.

Das hatte ich vermutet.

Allerdings ist, egal, wie du es angehst, eines zu beachten. Die Inhalte in der Tabelle bestehen (vermutlich) aus in Beziehung zueinander stehenden Daten. Diesen Zusammenhang zerreißt du natürlich, wenn du die Daten auf mehrere Tabellen verteilst.

Genau deshalb hätte ich gerne eine CSS-only Lösung gehabt, so dass der Zusammenhang im HTML (oder für Screen-Reader) weiterhin eindeutig erkennbar ist.

Hauptgrund für meinen Wunsch ist übrigens in erster Linie eine Platzersparnis: Eine Tabelle, die für sich genommen lediglich zwei Spalten hat (Wert 1 wird Wert 2 zugewiesen) aber viele Zeilen, sieht einfach extrem blöd (weil viel zu schmal) aus, egal wie man den Style sonst so gestaltet und der Nutzer ist sicherlich auch nicht böse, wenn er auf einer Seite weniger scrollen muss.

[Auge]

Hallo

Hauptgrund für meinen Wunsch ist übrigens in erster Linie eine Platzersparnis: Eine Tabelle, die für sich genommen lediglich zwei Spalten hat (Wert 1 wird Wert 2 zugewiesen) aber viele Zeilen, sieht einfach extrem blöd (weil viel zu schmal) aus, …

Deine Intention ist nachvollziehbar.

… egal wie man den Style sonst so gestaltet …

Nun ja, die Spalten kann man ja mit min- bzw. max-width anpassen. So ganz machtlos ist man ja doch nicht.

… und der Nutzer ist sicherlich auch nicht böse, wenn er auf einer Seite weniger scrollen muss.

Schon klar. Ich denke, du solltest dir die Lösung von JürgenB zumindest mal anschauen. Da wird allerdings auch gescrollt, wenn auch nur innerhalb der Tabelle mit fest stehenbleibendem Kopf, womit das, wenn auch nur eventuell, am Ziel vorbei geht.

Tschö, Auge

[Whouzuo]

Hauptgrund für meinen Wunsch ist übrigens in erster Linie eine Platzersparnis: Eine Tabelle, die für sich genommen lediglich zwei Spalten hat (Wert 1 wird Wert 2 zugewiesen) aber viele Zeilen, sieht einfach extrem blöd (weil viel zu schmal) aus

Vielleicht ist es ja in diesem Fall angebracht, die Tabelle einmal nach links zu kippen. Dann hast du pro Zeile eine Überschrift und eben lange Zeilen, dafür in der Höhe nur wenige Spalten.

[1UnitedPower]

Meine Herren!

Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist

Mir ist keine Methode bekannt, wie das ohne Änderungen am Markup zu bewerkstelligen wäre. Aber von der Machbarkeit mal abgesehen, halte ich den Ansatz auch hinsichtlich User Experience für kontraproduktiv. Bei jeder Teil-Tabelle muss der Benutzer kognitiv neu ansetzen und die Semantik neu erfassen, also zum Beispiel die Kopfzeile der Tabelle erneut lesen.

[JürgenB]

Hallo Murphy,

die Probleme wurden ja schon beschrieben. Wenn die Tabelle mehrspaltig gestalten möchtest, weil die Überschriften weg scrollen, dann wäre eine Tabelle was für dich, der der der Tabellenkopf nicht mit scrollt. S. hierzu http://forum.de.selfhtml.org/archiv/2013/2/t212882/#m1454603. Meine Testseite.

Gruß, Jürgen

[T-Rex]

Wie wär es wenn du einfach 3 Tabellen machst.
Bei einem großen Screen stehen diese nebeneinander float: left. Wird der Screen kleiner verlieren die Tabellen ihren float. Zudem werden die Kopfzeilen unsichtbar (display: none) und border bzw. margin Einstellungen müssen so vorgenommen werden, dass es aussieht als sei es eine Tabelle.
Ist Semantisch vielleicht nicht ganz korrekt würde aber am ehesten das treffen was du dir vorstellst.
Die Inhalte kannst du dann natürlich nicht dynamisch verteilen.

Hoffe das ist ein akzeptabler Lösungsansatz.

Gruß
Ehefrau von der Couch schupsender und DFB Pokal guckender
T-Rex

[Gunnar Bittersmann]

@@Murphy:

nuqneH

Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist

Die Befürchtung ist unbegründet.

Qapla'

[Whouzuo]

@@Murphy:

nuqneH

Ich befürchte zwar, dass die Antwort "Absolut nicht machbar" ist

Die Befürchtung ist unbegründet.

Ich finde die Lösung schlecht. Man kann die Teiltabellen nicht komplett markieren bzw. die Headerfelder nicht kopieren. Das ist doof!

[Steel]

Hi,

Ich finde die Lösung schlecht. Man kann die Teiltabellen nicht komplett markieren bzw. die Headerfelder nicht kopieren. Das ist doof!

Was genau meinst Du? Die Lösung funktioniert einwandfrei. Wenn Du die Tabelle markierst, werden zwar die zusätzlichen Header nicht markiert, aber beim Copy/Paste hast Du eine wunderbare Tabelle. Oder willst Du die Tabelle unbedingt genauso kopieren, wie sie angezeigt wird? Warum?

[1UnitedPower]

Meine Herren!

Oder willst Du die Tabelle unbedingt genauso kopieren, wie sie angezeigt wird? Warum?

Weil das Verhalten vorne und hinten nicht auf das visuelle Feedback passt – ja. Drei Tabellen zu kopieren und dabei eine wieder einzufügen widerspricht dem, was man als Nutzer erwartet. Der Nutzer weiß nicht, dass es sich im technischen Sinne um nur eine Tabelle handelt. Er weiß übrigens auch nicht, warum er die Kopfzeilen nicht markieren kann.

User Experience (ISO 9241-210):
„a person's perceptions and responses that result from the use or anticipated use of a product, system or service“

[Steel]

Hiho!

Da unterscheiden sich wohl unserer Erwartungen. Meine werden durch diese Funktionalität übertroffen.

[Murphy]

Weil das Verhalten vorne und hinten nicht auf das visuelle Feedback passt – ja. Drei Tabellen zu kopieren und dabei eine wieder einzufügen widerspricht dem, was man als Nutzer erwartet. Der Nutzer weiß nicht, dass es sich im technischen Sinne um nur eine Tabelle handelt. Er weiß übrigens auch nicht, warum er die Kopfzeilen nicht markieren kann.

Naja, ein ähnliches Problem hat man doch auch, wenn man THEAD, TFOOT, TBODY verwendet: Da muss man im Quellcode auch (unverständlicherweise) den Footer for dem Body aufführen und wenn man die Tabelle in die Zwischenablage kopiert landet es in der gleichen Reihenfolge dort, obwohl der Browser es anders darstellt.

[Gunnar Bittersmann]

@@Murphy:

nuqneH

Naja, ein ähnliches Problem hat man doch auch, wenn man THEAD, TFOOT, TBODY verwendet: Da muss man im Quellcode auch (unverständlicherweise) den Footer for dem Body aufführen

Erstens zum Verständnis und zweitens ist das nicht (mehr) so.

Qapla'

[Auge]

Hallo

Naja, ein ähnliches Problem hat man doch auch, wenn man THEAD, TFOOT, TBODY verwendet: Da muss man im Quellcode auch (unverständlicherweise) den Footer for dem Body aufführen

Erstens zum Verständnis …

Über die Beispieltabelle habe ich herzlich gelacht.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge:

nuqneH

Über die Beispieltabelle habe ich herzlich gelacht.

:-D Da hatte ich gar nicht so genau hingesehen. Der Tomas schwelgt in alten Zeiten. Der Effzeh kriegt seinen eigenen tbody.

Aber Bayern auf Platz liest sich gut.

Qapla'

[1UnitedPower]

Meine Herren!

Die Befürchtung ist unbegründet.

Hier eine modifizierte Version, die die Kopfzeile nicht mit Pseudo-Elementen, sondern mit Text-Shadow dupliziert.

Vorteile

• kein zusätzliches Markup notwendig
• keine Beschränkung auf 3 Teil-Tabellen

Nachteile

• nur eingeschränkt stylebar
• nicht fluid

PS: Ich bin immer noch der Meinung, dass das Aufsplitten eine unschöne Sache ist. Man sollte zumindest noch andere Layout-Möglichkeiten in Betracht zu ziehen, bevor man zu dieser drastischen Variante greift.

[ichbinich]

Hallo,

Hier eine modifizierte Version, die die Kopfzeile nicht mit Pseudo-Elementen, sondern mit Text-Shadow dupliziert.

Wenn man die Kopfzeile markiert, verschwinden die Duplikate...

vg ichbinich

[1UnitedPower]

Meine Herren!

Wenn man die Kopfzeile markiert, verschwinden die Duplikate...

Interessant. Scheint eine Einstellung im Default-Stylesheet von FF zu sein, die text-shadow für Markierungen deaktiviert.

[Linuchs]

Meine Herren!

Wenn man die Kopfzeile markiert, verschwinden die Duplikate...

Interessant. Scheint eine Einstellung im Default-Stylesheet von FF zu sein, die text-shadow für Markierungen deaktiviert.

Mit Opera 12.16 nicht. Man kann allerdings die Duplikate (Kopf) nicht markieren.

Linuchs