Übung 9: Jede zweite Tabellenzeile einfärben

Hinweise

Lösung

tr:nth-child(even) { background: #F3ECFA; }

Wie die Formel gelesen wird

Die Pseudoklasse für das n-te Kind nimmt entweder ein Schlüsselwort oder eine Formel entgegen. Die Formel hat die Gestalt aus einem Vielfachen und einer Verschiebung: Der Zähler läuft von null aufwärts, und jeder Wert, der dabei herauskommt und mindestens eins ist, bezeichnet eine Position. Die Schlüsselwörter für gerade und ungerade Positionen sind Kurzformen für ein Vielfaches von zwei mit und ohne Verschiebung.

Damit lässt sich mehr treffen als jede zweite Zeile: jede dritte, jede vierte, die ersten drei über eine negative Verschiebung, oder alles ab der vierten. Der Ausdruck wird ausgewertet, bevor irgendetwas gefiltert wird – gezählt werden immer alle Geschwister.

Genau darin liegt der typische Irrtum. Eine Bedingung aus Typ und Position trifft ein Element, das beides erfüllt, und nicht das n-te Element dieses Typs. Für den zweiten Fall gibt es eine eigene Pseudoklasse, die nur unter den Geschwistern desselben Typs zählt.

Warum die Zeilen nicht immer die sind, die man sieht

In einer Tabelle mit Kopfbereich zählt die Pseudoklasse innerhalb ihres Elternelements, und das ist nicht die Tabelle, sondern der jeweilige Abschnitt. Eine Kopfzeile in einem eigenen Abschnitt zählt also nicht mit, und die erste Zeile des Datenbereichs trägt die Position eins – auch dann, wenn sie optisch die zweite Zeile der Tabelle ist.

Fehlt der Abschnitt im Quelltext, ergänzt der Browser ihn stillschweigend; die Zeilen liegen dann alle in demselben ergänzten Element. Beides führt dazu, dass die Streifen unter Umständen verschoben aussehen, obwohl der Selektor stimmt. Wer den Effekt sieht, prüft zuerst die Struktur und dann erst die Formel.

Der zuverlässigere Weg ist deshalb, den Abschnitt ausdrücklich zu schreiben und den Selektor daran zu binden. Dann ist eindeutig, worauf sich die Zählung bezieht, und eine später ergänzte Fußzeile verschiebt nichts.

Streifen als Lesehilfe – und ihre Grenzen

Der Zweck abwechselnder Zeilenfarben ist, das Auge über eine breite Tabelle zu führen. Damit das funktioniert, muss der Unterschied schwach sein: Zwei deutlich verschiedene Farben lesen sich als zwei Gruppen und nicht als eine durchlaufende Liste. Ein sehr heller Ton wie in dieser Aufgabe ist die richtige Größenordnung.

Zu bedenken ist, dass Hintergründe beim Drucken standardmäßig wegfallen – auf dem Papier ist die Lesehilfe also nicht da. Wo sie dort gebraucht wird, treten dünne waagerechte Linien an ihre Stelle, und die überstehen den Ausdruck.

Und der Kontrast zum Text muss auf beiden Zeilenfarben ausreichen. Bei einem hellen Streifen ist das unkritisch; sobald jemand die Farbe kräftiger wählt, gehört sie nachgemessen. Für Tabellen mit einer hervorgehobenen Zeile gilt außerdem, dass die Hervorhebung stärker sein muss als der Streifenwechsel – sonst geht sie darin unter.

Tabellen auf schmalen Bildschirmen

Eine Datentabelle lässt sich nicht beliebig schmal machen: Ab einer gewissen Breite ist entweder der Text unlesbar oder die Spalten überlappen. Der ehrlichste Weg ist deshalb, die Tabelle rollen zu lassen – ein Container mit waagerechtem Überlauf um die Tabelle herum, und die Tabelle behält ihre Mindestbreite.

Dazu gehört eine Kleinigkeit, die oft fehlt: Der rollende Container braucht eine Position in der Tabulatorreihenfolge und eine Beschriftung, damit er mit der Tastatur erreichbar ist und die Sprachausgabe ihn ankündigt. Sonst ist der Inhalt für einen Teil der Leser schlicht nicht erreichbar.

Die verbreitete Alternative baut die Tabelle in Karten um – jede Zeile wird zu einem Block, jede Zelle bekommt ihre Spaltenüberschrift über den generierten Inhalt davorgesetzt. Das liest sich auf dem Telefon besser, hat aber einen Preis: Sobald die Anzeigeart der Tabellenelemente geändert wird, verliert die Tabelle ihre Struktur für die Sprachausgabe, und aus Zeilen und Spalten wird eine Liste. Für kleine Tabellen ist das vertretbar, für Datentabellen, in denen der Zusammenhang zwischen Zeile und Spalte die Information trägt, nicht.

In dieser Aufgabe steht die Tabelle ohne eigenen Abschnitt im Quelltext, die Zählung ist also eindeutig. Der Prüfer liest die berechneten Hintergrundfarben aller Zeilen und vergleicht das Muster; welche Formel es erzeugt, prüft er nicht. Die Schlüsselwörter für gerade und ungerade Positionen und die ausgeschriebene Formel sind damit gleichwertig – gefordert ist nur, dass keine Klasse im Dokument dafür nötig ist.

Kommt später eine Zeile hinzu oder fällt eine weg, bleibt das Muster von sich aus richtig – genau deshalb steht die Bedingung im Stylesheet und nicht im Dokument.

Fragen zur Übung