So sorgen Sie für Übersicht

Teil 2: Workshop CSS: Aufklappbare Elemente

Die Kopf- und die Fußzeile erhalten die gleiche Formatierung. Deswegen können Sie die drei Elemente table.aufklappen thead th, table.aufklappen tfoot th und table.aufklappen tfoot td auch mit den identischen Eigenschaften versehen:

border-style: solid;
border-width: 1px;
border-color: #cff;
background: #0066CC;
padding: 5px 5px;

Alle Zellen erhalten einen Rahmen der Breite 1px und einer hellblauen Farbe. Der Hintergrund ist dunkelblau und der Abstand von oben und unten beträgt jeweils 5px. Die Hintergrundfarbe der Tabelle setzen Sie über den body-Bereich Ihrer Tabelle:

table.aufklappen tbody {
background:#FFFF66; }

Aus optischen Gründen hat die Tabelle keinen rechten und linken Tabellenrahmen. Dies lässt sich am einfachsten über eine nicht ganz korrekte Verwendung des Tags <th> realisieren.

CSS-Workshop

© Archiv

Komprimiert sehen Sie nur noch die Kopf- und Fußzeile der Tabelle.

Dies wird im Beispiel nicht nur für die Header-Zeile, sondern jeweils auch für die erste Zelle einer jeden Inhaltsspalte verwendet. Dadurch lassen sich dann auch der linke und rechte Rand mit einfachen Mitteln entfernen:

table.aufklappen tbody th {
padding: 5px 5px;
border: 1px solid #000000;
border-left: none; }

Der Rand um die Zelle mit einem Pixel Breite in der Farbe Schwarz verschwindet für die erste Reihe komplett.

Das gleiche Verfahren wenden Sie für die restlichen Zellen an, die als normale Datenzelle mit <td> definiert sind. Dabei verschwindet der rechte Rand und wird jeweils durch den linken der Folgezelle ersetzt - außer bei der letzten Zelle, sodass der gewünschte Effekt entsteht.

table.aufklappen tbody td {
padding: 5px 5px;
border: 1px solid #000000;
border-right: none; }

Die abwechselnde Zeilenfarbe erreichen Sie durch die bereits erwähnte Klasse eins. Diese ändert die Hintergrundfarbe in einen Ton zwischen hellblau und türkis.

table.aufklappen tbody tr.eins {
background: #99CCFF; }

Klappen

Damit haben Sie die Grundlagen für das Herzstück des Effekts gelegt - eine kompakte Javascript-Funktion. Die Tabelle soll die Inhalte preisgeben, wenn ein Doppelklick auf die Fußzeile erfolgt und bei einem erneuten Klick wieder verbergen.

Das Skript ist einfach aufgebaut und liest als Erstes alle Tabellen in den internen Speicher. Handelt es sich um eine Tabelle der Klasse aufklappen, so wird der entsprechende Mechanismus aktiviert. Anschließend wird die Fußzeile klickbar gemacht und die Inhalte der Tabelle - abhängig vom aktuellen Zustand - entweder angezeigt oder verborgen. Zum Aufruf des Skripts wird die Ladefunktion der Seite zu Hilfe genommen.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…