JavaScript/CSS – (msc) Zebramuster sind ein guter Weg, die Lesbarkeit von Tabellen zu verbessern. Da jede zweite Zeile mit einer unauffälligen Hintergrundfarbe ausgestattet ist, verrutscht das Auge des Betrachters nicht, und es fällt ihm leichter, zusammengehörende Zahlen zu erfassen. Bei Webdesignern sind die Zebratabellen indes unbeliebt: Fügt man irgendwo eine Zeile ein, muss das Zebramuster von Hand angepasst werden, damit es wieder korrekt alterniert. Eine elegante Lösung für Zebratabellen hat Jop de Klein ersonnen: Ein Javascript stattet Tabellen automatisch mit dem Muster aus; die Farben werden via CSS bestimmt. Das ausgeklügelte Script hebt die ausgewählte Zeile speziell hervor – also die Zeile, über der der Mauscursor positioniert ist.

Das Script ist einfach zu benützen: Es wird im Kopf der HTML-Seite deponiert und beim Öffnen automatisch ausgeführt. Die Stilvorgaben sind den eigenen Vorstellungen anzupassen; das Statement tbody tr.even td {background:#eee;} gibt die Farbe für die geraden Zeilen vor, bei tbody tr.ruled td bestimmt man das Aussehen der ausgewählten Zeile. Simpel, effektiv.

Wer das Muster nicht dynamisch generieren, sondern fix in die Zelle schreiben lassen will, fügt das Script ein, lädt die HTML-Seite im Webbrowser und verwendet dann den Befehl «Speichern unter». Webmaster mit einer Aversion gegen Javascript können den Code nun wieder löschen, denn der Browser hat die Seite mit den vom Script generierten class-Zuweisungen abgelegt.

So sieht eine solche Zebra-Tabelle aus:

Better Zebra Tables Example

Den Original-Artikel, auf dem auch der Code des Scrips zu finden ist, gibt es unter dieser Adresse: http://validweb.nl/artikelen/javascript/better-zebra-tables/