nicht angemeldet
Hallo,
Klar lässt sich das, wie von Dir beschrieben lösen. Doch dann bin ich wieder am Ausgangspunkt und kann eigentlich auch gleich eine Tabelle nehmen.
Aus HTML-Tabellen strukturieren Daten, indem sie sie in einer bestimmte Relation zueinander setzen. Daher gibt es Captions, Header, Footer, Header- und Inhaltszellen. Normale Zellen haben zugeordnete Headerzellen (explizit mit scope- bzw. headers-Attributen). Für jede Zelle lassen sich also maschinenlesbar Beschriftungen finden, sodass Zuordnungen wie »im Jahr 2010 exportierte China Waren und Dienstleistungen im Wert von 4,5 Milliarden Dollar in die EU« (Phantasiezahl) möglich sind.
Aus CSS-Sicht ist display: table, table-row und table-cell einfach ein weiterer Layouting-Mechanismus. Natürlich orientieren sich dessen Möglichkeiten an den Erfordernissen der oben beschriebenen Datentabellen. Wenn ich aber irgendeinem Element display: table oder display: table-cell gebe, wird es bloß entsprechend dargestellt, hat es noch lange nicht die oben beschriebene Semantik.
Das ist der fundamentale Unterschied zwischen HTML-Tabellen und CSS-Tabellenlayout. Wenn ich Daten tabellarisch strukturieren will, dann und nur dann sollte ich HTML-Tabellen verwenden. Wenn ich einfach nur Boxen tabellentypisch anordnen will, so kann ich display: table und Co. verwenden.
Flexbox ist nicht empfehlenswert, mangels ausreichender Browserunterstützung.
Das ist m.E. ein unpassender Ansatz für die Webentwicklung. Dutzende Techniken werden nicht oder nur mangelhaft in den relevanten Browsern unterstützt. Sie sind nichtsdestoweniger nützlich und empfehlenswert, man muss sich nur über einen sinnvollen Fallback Gedanken machen. Ein besserer Ansatz ist Progressive Enhancement.
Hier funktioniert bei mir keines der Demos.
»Bei mir« heißt welcher Browser?
Wie dort auch angemerkt wird, verwenden die Beispiele nur die finale Syntax, Webkit-Präfixes und sind nicht mit älteren Implementierungen kompatibel. Das lässt sich verbessern.
Mathias
Der Martin
JürgenB
Gunnar Bittersmann