Webseiten
HTML-Tabellen gestalten mit Tablecloth
von
Stefan
Kuhn - 23.02.2008
HTML-Tabellen werden übersichtlicher, wenn Sie Datenreihen farblich gestalten und durch Mouseover-Effekte Spalten und Zeilen hervorheben. Dies gelingt mit dem kostenlosen Skript-Paket Tablecloth.
Tablecloth herunterladen und entpacken
Sie finden das Skript-Paket Tablecloth kostenlos im Internet. Laden Sie die Datei „tablecloth_files.zip“ herunter und entpacken Sie sie in ein Verzeichnis Ihrer Wahl. Im Ordner „tablecloth“ finden Sie nun die Beispieldatei „index.html“ sowie den Unterordner „tablecloth“ mit CSS-Formatierungen, Javascripts und Grafiken.
Tabellen nutzen
Für einen ersten Test laden Sie die Datei „index.html“ in den Browser. Ein Blick in den Quelltext zeigt Ihnen, dass die Beispieltabellen ohne weitere Formatierungen auskommen. Zwei Zeilen im <head>-Bereich der Seite reichen für die ansprechende Darstellung der Tabellen:
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
Tabellen ändern
Bei den Tabellen im Beispiel oben wird durch den Mouseover-Effekt nur die jeweilige Spalte der Tabelle hervorgehoben. Wenn Sie auch die dazugehörende Tabellenzeile hervorheben wollen, dann konfigurieren Sie dies ab Zeile 14 in der Javascript-Datei „tablecloth.js“ im Unterordner „tablecloth“. Setzen Sie hier:
var highlightRows = true;
Wollen Sie eine permanente Markierung per Mausklick, dann setzen Sie:
var selectable = true;
