@@Gunnar Bittersmann
Die eigentliche Idee ist, die vorhandene Struktur (jeweils 3 Gruppen mit 3 Elementen in der Horizontalen und der Vertikalen) auch im Markup abzubilden.
Wenn man das macht, also adäquates Markup schreibt, bekommt man das Styling quasi als Geschenk obendrauf.
Ich will die unterschiedliche Denkweise noch mal erläutern.
Pferd von hinten aufgezäumt:
Von einer nicht weiter strukturierten 9×9-Tabelle[1] auszugehen; bei der Frage, wie man die Linien für die Gruppen dicker bekommt, darauf kommen, aus Darstellungsgründen das Markup anzupassen und nachträglich colgroup
/col
und tbody
einzufügen.
Übrigens bräuchte man für die Darstellung die Gruppierung im Markup nicht und auch keine Inline-Styles oder Klassen, das kriegt man auch mit Pseudoklassen :nth-child
(oder :nth-of-type
) hin.
Markup-first-Ansatz:
Zuerst die Struktur im Markup abbilden: Es gibt 3 Gruppen zu jeweils 3 Spalten:
<colgroup><col/><col/><col/></colgroup>
<colgroup><col/><col/><col/></colgroup>
<colgroup><col/><col/><col/></colgroup>
Es gibt 3 Gruppen zu jeweils 3 Zeilen:
<tbody><tr></tr><tr></tr><tr></tr></tbody>
<tbody><tr></tr><tr></tr><tr></tr></tbody>
<tbody><tr></tr><tr></tr><tr></tr></tbody>
Die tr
s werden dann mit jeweils 9 td
s befüllt — fertig ist das Markup.
Beim Stylen merkt man dann: oh, wie gut, dass ich die colgroup
s und tbody
s schon habe.
LLAP 🖖
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
4×4, 16×16 entsprechend ↩︎