Wie kann man eine Statusspalte mit Icons anstelle von Text in einer HTML-Tabelle gestalten?
Beispiel: Statusspalte mit Icons in Tabelle
In diesem Beispiel wird gezeigt, wie man eine Statusspalte in einer HTML-Tabelle mit Icons anstelle von Text gestalten kann. Die Status werden über farbige SVG-Symbole dargestellt, die im `td`-Element eingebettet sind. Die Farbzuweisung erfolgt über CSS-Klassen, die jeweils unterschiedliche Farben für verschiedene Status setzen.
Damit die Icons auch für Menschen mit Bildschirmlesegeräten verständlich sind, verwenden wir das `aria-label`-Attribut und einen `title`, der beim Hover angezeigt wird. Die SVG-Grafiken sind einfach gehalten, sodass sie gut skalieren und sich optisch anpassen lassen.
Diese Methode ist flexibel, da Sie beliebige Symbole verwenden können, eigene SVGs einbinden oder alternativ Icon-Fonts wie Font Awesome nutzen könnten, falls externe Bibliotheken erlaubt sind. Hier ist alles ohne externe Abhängigkeiten direkt in HTML und CSS eingebettet.