Über mich

Startseite arrow Tipps & Tricks arrow Tablecloth - Tabellen funktional und optisch aufwerten

Tablecloth - Tabellen funktional und optisch aufwerten

Dienstag, 11. Dezember 2007
Geschrieben von Armin Vieweg
Bei einem Klick auf eine Zeile wird diese farbig hervorgehoben, Zeilen oder Spalten wechseln sich farbig ab - das und noch mehr kann das JavaScript Tablecloth.

TableclothWas übersetzt soviel bedeutet wie "Tabellen Kleidung" ist im Prinzip nicht mehr als ein JavaScript und ein Stylesheet, die Tabellen die sich auf einer Website befinden optisch und funktionell aufwerten.

Dieses Script zerstört jede Website, bei der Designelemente mit Tables umgesetzt wurden - was ein guter Webdesigner aber eh nicht macht.

Für Internetseiten, bei denen die Tabelle auch nur für den ursprünglichen Zweck verwendet werden sorgt das Script dafür, dass die Hintergrundfarbe der Zeilen sich pro Zeile abwechselt.

tablecloth2.gifEin sehr schönes und nicht unbedingt übliches Features, ist die permanente Markierung von Zeilen auf Mausklick. So kann gerade bei unübersichtlich, großen Tabellen ein Hilfsmittel an die Hand gegeben werden, mit denen der Benutzer eine für sich relevante Information markiert.

Der normale Hover-Effekt für Zeilen und Spalten ist selbstverständlich ebenfalls gegeben.



In den ersten Zeilen des JavaScripts können übrigens kleine Konfigurationen vorgenommen werden, ob bei MouseOver (Hover) die Zeile, die Spalte oder beide farblich hervorgehoben werden sollen. Das wirkt sich dann auch auf die permanente Markierung aus.

Die Einbindung des Scripts erfolgt denkbar einfach:

<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>



In dem Stylesheet können alle Farben und Hintergrundbilder für die Tabellen nach belieben geändert werden. Die Tabelle selbst braucht keine Zuordnung über ein ID oder Class-Name - das JavaScript wendet den Effekt auf alle Tabellen an, die sich auf einer Seite befinden. Blöd ist dies auch nur dann, wenn die Seite selbst aus einer oder mehreren Tabellen besteht.

Für Webdesigner, die sehr große und dadurch unübersichtliche Tabellen auf einer Website anbieten, lohnt sich dieses Script auf alle Fälle.

Eine Live-Demo des Scripts, sowie den Download der CSS- und JavaScript-Datei findet Ihr auf deren Website.


Website & Download:

Tablecloth - Aufhübschen von Tabellen




  Keine Kommentare vorhanden
Letzte Aktualisierung ( Mittwoch, 12. Dezember 2007 )
 
< Zurück   Weiter >