01.07.2009, 07:29 Uhr

Mehr Orientierung in Datentabellen

Je größer Tabellen ausfallen, desto schwerer fällt es dem Auge, die Zeile zu halten. Da hilft nur noch der Zeigefinger - oder ein spezielles Tabellendesign. Berührt die Maus eine Zelle, verändert sich der Rahmen - er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=”8”).
Je größer Tabellen ausfallen, desto schwerer fällt es dem Auge, die Zeile zu halten. Da hilft nur noch der Zeigefinger – oder ein spezielles Tabellendesign. Berührt die Maus eine Zelle, verändert sich der Rahmen – er wird rot. Das klappt, weil wir nicht die Zelle mit einem Rahmen umgeben haben, sondern den Tabelleninhalt. Dazu bedarf es eines vergrößerten Randabstandes (cellpadding=”8”).
Der Tabelleninhalt wird verlinkt und via CSS mit einem simplen Hover-Effekt versehen. Den Mauszeiger stellen wir auf seine Standard-Optik zurück, denn der Schein-Link selbst soll dem Besucher verborgen bleiben:
<a href="#">Tabelleninhalt</a>
Eine solche Datentabelle bedeutet mehr Aufwand, aber der könnte sich ja lohnen. Schließlich sieht es schicker aus und der Zeigefinger darf ruhig bleiben. Der CSS-Quellcode sieht so aus:
A:link { color : black; textdecoration: none; background-color: transparent; border: 1px solid gray; padding: 4px; cursor : default}
A:visited {color : black; textdecoration: none; background-color: transparent; border: 1px solid gray; padding: 4px; cursor : default}
A:hover {color: black; textdecoration: none; background-color: transparent; border: 1px solid red; padding: 4px; cursor: default}
Die Methode funktioniert mit allen modernen Browsern. Ältere zeigen nur den Effekt nicht an.




Das könnte Sie auch interessieren