Lesetip: responsive Tabellen (Inclusive Components)

[Gunnar Bittersmann]

Wo Tabellen hier immer wieder ein Thema sind (zuletzt auch in einem Thread von mir):

Da hat uns Heydon Pickering als Osterhase („Traditionshase“ 🤣) ein Osterei ins Osternest gelegt: Data Tables.

Prädikat: lesenswert!

TIL:

• verwende <th scope="col"> für Spaltenköpfe und <th scope="row"> für Zeilenköpfe

• Heydon plädiert dafür, für Listendarstellung bei schmalen Viewports tatsächlich die Daten doppelt im DOM zu haben – einmal als Tabelle, einmal als Liste, wobei jeweils nur eins davon sichtbar ist. Wie @1unitedpower in besagtem Thread sagte.

Die eine oder andere Anmerkung hab ich dazu noch:

• jede Tabelle hat mindestens ein tbody-Element, auch wenn keine <tbody>-Tags im HTML-Code stehen [1]

• div ist in dl erlaubt, um zusammengehörige dt/dd zu gruppieren. [2]

• role="none" als Synonym für role="presentation" [3]

LLAP 🖖

PS: Wieso ist eigentlich die Anzahl vergebbarer Tags (Kategorien) auf 3 beschränkt? Da hätte auch durchaus noch „html“ und „lesetipp“ oder „zur info“ reingehört. Und mit dieser Frage auch noch „zu diesem forum“.