3/2012

com! Artikeldatenbank - Alle Hefte ab 01/2005

Los
Los

HTML-Tabellen gestalten mit Tablecloth

Große HTML-Tabellen werden übersichtlicher, wenn Sie Datenreihen farblich unterschiedlich gestalten und durch Mouseover-Effekte Spalten und Zeilen hervorheben. Dies gelingt mit Javascripts und CSS-Formatierungen von Tablecloth. Weiter >>

Tipp-ID

1422

Gültig für

Webseiten

Autor

Stefan Kuhn

Datum

23.02.2008

Wertung

noch nicht bewertet
Ihre Bewertung

Inhalt

  1. Tablecloth herunterladen und entpacken
  2. Tabellen nutzen
  3. Tabellen ändern

1. Tablecloth herunterladen und entpacken

Sie finden 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 "table cloth" mit CSS-Formatierungen, Javascripts und Grafiken.

2. 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>

3. 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;

Weitere Infos

Verwandte Themen zu: HTML-Tabellen gestalten mit Tablecloth

nach oben