Scrollbare Tabelle mit Kopf
Eine andere Möglichkeit, Webseiten mit Tabellen übersichtlicher zu gestalten besteht darin, eine Scroll-Leiste einzubauen.
Spalte 1 | Spalte 2 |
---|---|
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 2 | spalte 2 |
zeile 3 | spalte 2 |
zeile 4 | spalte 2 |
zeile 5 | spalte 2 |
zeile 6 | spalte 2 |
Der Trick besteht einfach in einer etwas besseren Ausnutzung des HTML-Codes für Tabellen. Der Quellcode für dieses Beispiel sieht so aus:
<table border="1" style="width: 450px;"> <thead> <tr> <th width="150">Spalte 1</th> <th width="150">Spalte 2</th> </tr> </thead> <tbody style="overflow: scroll; height: 150px;"> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 2</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 3</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 4</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 5</td> <td width="150">spalte 2</td> </tr> <tr style="height: 15px;"> <td width="150">zeile 6</td> <td width="150">spalte 2</td> </tr> </tbody> </table>
Partnerwebsites
Websites mit Mobirise
- Startseite der Mobirise Extension Demo Website auf github.bpgs.de
- Übersicht zu den Elementen des Themes Mobirise4 in Mobirise 4, Version 4.7.7 auf demo-zu-netcup.9f8.de
- Gesamtübersicht zu den Designblöcken des Mobirise5 Themes AMP auf mobirise5-theme-amp.9f8.de
- Mobirise4 mit dem Theme PurityM auf mein-wunschname.de.cool
- EASY TO USE! erstellt mit Mobirise 4.4.1 und dem Theme default auf mein-wunschname.webspace.rocks
- MOBIRISE3 THEME MOBIRISE3 auf lc-pico-phpfriends.bpgs.de
- Website erstellt mit Mobirise3 und dem Theme Mobirise(auch unter dem Namen default) auf lc-ver-bummel.bpgs.de
Neuigkeiten
Tabellensortierung (16.01.2014 11:01:00) |
Die Beschreibung zum Einbau einer Tabellensortierung wurde verbessert und erweitert. Anhand eines Beispiels kann man den Einbau einer sortirbaren tabelle bei nPage künftig besser nachvollziehen. Außerdem wurde ein Downloadlink zur JavaScript-Datei bereit gestellt. Das kleine Tutorial findet man auf der Seite Tabelle sortieren.
|
Kommentare |
Keine Kommentare vorhanden. |
Kommentar verfassen |