Gunnar Bittersmann: Semantik bei diagonal geteilter Eckzelle

Beitrag lesen

@@Rolf B

Du möchtest also ein Extraheading mit colspan=3 über die Wertespalten legen? Mit anderen Worten: Du findest Janoschs Darstellungsidee eher nicht gut?

Ähm. HTML ist für die Angabe der Struktur da. Die Darstellung ist Sache von CSS! Dass man das immer und immer wieder sagen muss! Aber dass man das auch dir sagen muss‽

Das Markup von @JürgenB ist genau das, was ich auch vorgeschlagen hätte. Und wenn man Janoschs Darstellungsidee gut findet, dann make it so!

Die th[colspan]-Zelle nicht an ihrer ursprünglichen Stelle platzieren, sondern dort, wo auch die th[rowspan]-Zelle ist. Ein Element relativ zu einem anderen positionieren, egal wo sich die im DOM befinden – na wenn das mal kein Fall für anchor positioning[1] ist!

Sieht dann so aus: ☞ Codepen

Die schräge Trennlinie hab ich mit Maske gemacht wegen der Umschaltung der Farbe bei light und dark mode.[2]

Die Beschriftungen hab ich unten links bzw. oben rechts platziert. Bei längeren Beschriftungen (hallo, user-generated content!) dürfte es besser sein, die in Dreiecksform zu zwingen. shape-outside könnte behilflich sein.

🖖 Live long and prosper

--
In our chants of “ICE out now”
Our city’s heart and soul persists
Through broken glass and bloody tears
On the streets of Minneapolis

— Bruce Springsteen, Streets of Minneapolis

  1. TIL about anchor positioning ↩︎

  2. TIL when to wear a mask ↩︎