Components Grid Tabelle

Verwenden Sie die Tabellenkomponente, um den Vergleich und das Durchsuchen von Informationen für Benutzer zu erleichtern.

Wann sollte Tabelle verwendet werden?

Verwenden Sie die Tabellenkomponente, um Benutzern den Vergleich von Informationen in Zeilen und Spalten zu ermöglichen.

Wann Tabelle nicht verwendet werden sollte

Verwenden Sie die Tabellenkomponente niemals zum Layouten von Inhalten auf einer Seite.

Table captions

Verwenden Sie das caption-Element, um eine Tabelle auf die gleiche Weise zu beschreiben, wie Sie eine Überschrift verwenden würden. Eine Beschriftung hilft Benutzern, Tabellen zu finden, zu navigieren und zu verstehen. 

    

        Beschreibung der Tabelle

Eine einfache Tabelle

Einfache Tabelle
Datum Kosten
Ersten 6 Wochen 109,80 € pro Woche
Nächsten 33 Wochen 109,80 € pro Woche
Geschätzter Gesamttbetrag 2,200,00 € 
        

            Einfache Tabelle
            
                

                    Datum
                    Kosten
                

            
            
                

                    Ersten 6 Wochen
                    109,80 € pro Woche
                

                

                    Nächsten 33 Wochen
                    109,80 € pro Woche
                

                

                    Geschätzter Gesamttbetrag
                    2,200,00 €

Table headers

Verwenden Sie Table headers, um Benutzern mitzuteilen, was die Zeilen und Spalten darstellen. Verwenden Sie das scope-Attribut, um Benutzern unterstützender Technologien die Unterscheidung zwischen Zeilen- und Spaltenüberschriften zu erleichtern.

Beispiell einer komplett gestylten Tabelle
Datum Kosten
Ersten 6 Wochen 109,80 € pro Woche
Nächsten 33 Wochen 109,80 € pro Woche
Geschätzter Gesamttbetrag 2,200,00 € 
        

            Beispiell einer komplett gestylten Tabelle
            
                

                    Datum
                    Kosten
                

            
            
                

                    Ersten 6 Wochen
                    109,80 € pro Woche
                

                

                    Nächsten 33 Wochen
                    109,80 € pro Woche
                

                

                    Geschätzter Gesamttbetrag
                    2,200,00 €

Zahlen in einer Tabelle

Wenn Sie Zahlenspalten vergleichen, richten Sie die Zahlen in den Tabellenzellen rechts aus.

Tabelle mit Zahlen
Datum Kosten
Ersten 6 Wochen 109,80 €
Nächsten 33 Wochen 109,80 €
Geschätzter Gesamttbetrag 2,200,00 € 
        

            Tabelle mit Zahlen
            
                

                    Datum
                    Kosten
                

            
            
                

                    Ersten 6 Wochen
                    109,80 €
                

                

                    Nächsten 33 Wochen
                    109,80 €
                

                

                    Geschätzter Gesamttbetrag
                    2,200,00 €

Navigation innerhalb der Tabelle

  1. Datenzellen können mithilfe von Standardnavigationstasten, > < ∨ ∧ fokussiert werden, einschließlich Richtungspfeilen, Pos1, Ende, Strg+Pos1 und Strg+Ende.
  2. Die Tasten Bild nach unten und Bild nach oben werden nicht unterstützt, da solche scrollähnlichen Funktionen bei so wenigen Zeilen nicht sinnvoll sind.
  3. Die Links können im fokussierten Zustand mit der Tastatur aktiviert werden.
  4. Da die Kopfzellen keine Funktionalität bieten, sind sie nicht fokussierbar. Benutzer von Bildschirmleseprogrammen sind sich ihrer Anwesenheit weiterhin bewusst, da Zeilen- und Spaltenüberschriften von Bildschirmleseprogrammen während der Navigation angekündigt werden. Außerdem sind sie auch im Lese- oder Browsingmodus eines Screenreaders navigierbar.
Tabelle mit Zahlen
Datum Kosten
Ersten 6 Wochen 109,80 €
Nächsten 33 Wochen 109,80 €
Geschätzter Gesamttbetrag 2,200,00 €

Sortierbare Tabelle

Um die Tabellen-Spalten zu sortieren soll in header die aria-sort="ascending" auszeichnung und einem <span tabindex="-1" role="button">Kosten</span> definiert werden.

Weiter Informationen aus dem Codebeispiel entnehmen.

Tabelle sortieren
Datum Kosten
Ersten 6 Wochen 109,80 €
Nächsten 33 Wochen 109,80 €
Geschätzter Gesamttbetrag 2,200,00 € 
        

            Tabelle sortieren
            
                

                    
                        Datum
                    
                    
                        Kosten
                    
                

            
            
                

                    Ersten 6 Wochen
                    109,80 €
                

                

                    Nächsten 33 Wochen
                    109,80 €
                

                

                    Geschätzter Gesamttbetrag
                    2,200,00 €

OSI Hilfe Dialog