Semantik bei diagonal geteilter Eckzelle

[Camping_RIDER]

Aloha ;)

Man kennt aus Printdarstellungen dort, wo Tabellen sowohl je eine Zeilen- als auch einen Spaltentitel^[1] tragen, den Fall der diagonal geteilten Zelle in der linken oberen Ecke, in der rechts oben über dem Trennstrich eine zusätzliche Beschriftung für die Spaltentitel und links unten darunter die für die Zeilentitel steht:

Mir ist völlig klar, dass diese linke obere Eckzelle nicht zwingend beschriftet sein muss. Meist bietet es sich eher an, dort einen allgemeineren Titel für die Tabelle (im obigen Fall z.B. „Städte und ihre Eigenschaften“) unterzubringen oder die Zelle sogar komplett leer zu lassen, da sich die Spalten und Zeilen für gewöhnlich aus dem Kontext auch selbst erklären und nicht zwingend einer Beschriftung bedürfen.

Trotzdem habe ich mich gefragt: Ist eine solche Darstellung wie im obigen visuellen Beispiel bei sinniger Semantik mit HMTL überhaupt möglich - und wenn ja, wie?

Grundsatz-Konflikt: dreigeteilte Grundstruktur der HTML-Tabelle

Tabellen sind in HTML ja so definiert, dass sie in drei Bereiche unterteilt sind - THEAD, TBODY und TFOOT. Diese Struktur legt imho nahe, dass nach dem Sinn der Spec die Dinge, die im THEAD liegen, von ihrer semantischen Bedeutung her die Dinge beschriften sollen, die im TBODY liegen. Demnach wäre - im obigen Beispiel - in der Zelle links nur die Beschriftung „Stadt“ nötig, denn damit wäre ja die erste Spalte zu beschriften.

Klar, HTML ermöglicht durchaus ja auch weitere Titel in der Zeile (TH im TBODY), die sind aber Teil des Tabellenkörpers und - zumindest meinem Gefühl nach - aufgrund der übergeordneten dreiteiligen Struktur eher nachrangig, die Spaltentitel sind durch Platzierung im THEAD höherrangig - und demnach wäre dann im THEAD zunächst die Spalte zu beschriften, also kein vorgesehener Platz für eine Beschriftung der Spaltentitel.

Die als Beispiel gezeigte Tabelle hat im Kontrast dazu - zumindest visuell - gleichberechtigte Spalten- und Zeilentitel, die auch je eine eigene Beschriftung in der Eckzelle bekommen.

Okay, ich könnt jetzt natürlich, um diese Gleichberechtigung zu erzwingen, auch die Spaltenüberschriften in den TBODY zwängen - aber ob das etwas besser macht?

Ist eine solche Tabelle also mit der HTML-Tabelle eigentlich semantisch überhaupt nicht darstellbar, weil sie eine ganz andere als die vorausgesetzte Grundstruktur hat?

Wie ich das bisher gelöst hätte und warum das nicht gut ist

Bisher habe ich in solchen Fällen die Spaltenüberschrift in der Eckzelle links oben oft zweckentfremdet und dort beides reingeschrieben, mit Trennstrich, oder in Absätzen mit unterschiedlichem Alignment, also z.B. "Stadt / Eigenschaft" - oder eben auch mal leer gelassen.

Im vorliegenden Fall (nicht an diesem Minimalbeispiel) sind die konkreten Spaltentitel aber user-generated content und das Bedürfnis, diese noch einmal mit einer Beschriftung zu versehen ist da - und mir gefällt die "Stadt / Eigenschaft"-Lösung nicht, auch, weil sie semantisch falsch ist (semantisch beschriftet diese TH ja die Spalte, und in der kommen eben nur Städte, keine Eigenschaften vor.

Meine Überlegung

Ich habe ein wenig experimentiert, ob ich das semantisch nicht besser hinbekomme und habe sowas wie eine Lösung gefunden (es geht mir im Pen nicht um das CSS, das ich einfach nur irgendwie reingedengelt habe damit die Tabelle auch visuell zeigt was sie vermitteln soll, sondern um das HTML, um die semantische Struktur).

Ganz gut gefällt mir, dass in dieser Lösung die Spaltenbeschriftung und die Zeilenbeschriftung je in relativ eindeutiger Relation zu den Spalten-/Zeilentiteln stehen:

Für die Spaltentitel ist die Spaltenbeschriftung die erste Zelle mit Inhalt in dieser Zeile (und in den anderen Zeilen steht in dieser 2. Spalte kein originärer, eigener Inhalt, auf den sich die Beschriftung beziehen könnte) und für die Zeilentitel ist die Zeilenbeschriftung die erste Zelle in dieser Spalte (und in den anderen Spalten steht in dieser 2. Zeile kein originärer eigener Inhalt, auf den sich die Beschriftung beziehen könnte).

Überhaupt nicht gefallen mir die leeren TH-Elemente und der Umstand, dass mein herbeigeredeter "klarer Zusammenhang", siehe Absatz drüber, gar nicht so stark ist, immerhin würden die Colspan/Rowspan ja auch einen Zusammenhang suggerieren, das Argument ist also nicht ohne Schwachstellen.

Trotzdem interessiert mich eure Meinung (zur semantischen Grundsatzproblematik): Wie findet ihr meinen neuen Lösungsansatz? Ist das Quatsch? Gibts darin No-Gos, die ich übersehe? Seht ihr bessere Lösungsmöglichkeiten? Ist es letztlich eine unlösbare Aufgabe weil HTML-Tabellen so einfach nicht funktionieren und nicht jede Print-Tabelle sinnvoll als HTML-Tabelle umgesetzt werden könnte?

Ihr braucht euch nicht verkünsteln, wenn euer Rat lautet "nimm keine TABLE, sondern custom elements mit WAI-ARIA" verstehe ich das auch ohne konkret funktionierendes Beispiel 😉 Mich interessieren vor allem eure Meinungen und Standpunkte zum Thema.

Grüße,

RIDER

---

1. Wording: Ich versuche hier konsequent zwischen "Spaltentitel" als "Beschriftung für eine Spalte" und "Spaltenbeschriftung" für den "Titel der Spaltentitel" zu unterscheiden (und entsprechend für Zeilen), sonst wirds noch verwirrender. ↩︎