Dieter Petereit 5. Dezember 2012

FooTable: jQuery-Plugin macht HTML-Tabellen auf kleinen Screens benutzbar

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

Tabellen mit Dateninhalten sind auf kleinen Screens in Sachen Usability eine Qual. Schon, wenn mehr als zwei Spalten dargestellt werden müssen, beginnt – wenn es gut läuft – die horizontale Scrollerei. Die Übersicht geht schnell verloren. Findige Entwickler brachten zwischenzeitlich eine ganze Reihe von Lösungen für dieses Problem hervor. FooTable, ein schlankes jQuery-Plugin, gehört dabei zu den besten Ansätzen und kann sehr simpel implementiert werden.

FooTable: Tabellensteuerung mit HTML5 Data-Attributen

Wenn eine HTML-Tabelle auf kleinen Geräten aufgerufen wird, versucht der Browser zunächst, die Tabelle in den Viewport zu quetschen, was bereits in den meisten Fällen zur Unbenutzbarkeit führt. Kann der Browser die Tabelle beim besten Willen nicht innerhalb des zur Verfügung stehenden Platzes anzeigen, bricht die Tabelle nach rechts aus und muss horizontal gescrollt werden. Eine Lösung, die im Grunde auf dieses Standardverhalten aufsetzt, es dabei aber kontrolliert einsetzt, ist Zurbs Responsive Tables, das wir hier bei Dr. Web bereits vor einiger Zeit vorstellten.

FooTable geht anders vor. Es setzt nicht auf kontrolliertes horizontales Scrollen unter Verwendung einer Schlüsselspalte, sondern verbirgt, je nach Breakpoint, beliebig viele Spalten. In der ersten Zelle der verbleibenden Spalten wird dann ein großes Plus-Symbol gezeigt, das nach Tap oder Klick unterhalb der Datenreihe die weiteren Inhalte übersichtlich anzeigt.

Das funktioniert mittlerweile neben der reinen Darstellung von Textinformationen, obwohl das Plugin erst wenige Tage alt ist, bereits mit HTML-Inhalten, wie Bildern und Links und lässt sich sogar auf die bekannte Art und Weise sortieren. In Arbeit befindet sich derzeit die Möglichkeit, die Inhalte zu filtern. Derzeit müssen die Datentabellen noch von Hand oder über zusätzliche Programmierung bestückt werden. Für eine spätere Version ist das Laden von Json-Inhalten vorgesehen.

FooTable von Steven Usher und Brad Vincent ist ein kostenloses jQuery-Plugin, das frei über die Website oder aus dem Github-Repository geladen und verwendet werden kann. Es wird unter der liberalen MIT-Lizenz vertrieben und kann so auch für kommerzielle Projekte kostenlos genutzt werden. Die Lizenz ist im Header des Scripts hinterlegt und darf nicht entfernt werden.

FooTable: So funktioniert’s…

Zunächst muss das Plugin, nebst dem zugehörigen CSS, nach dem Aufruf von jQuery selbst im Kopf des Dokuments eingebunden werden.



Dann kann der Funktionsaufruf erfolgen:

FooTable arbeitet, wie im responsiven Design üblich, mit Breakpoints. Per Standard sind zwei Breakpoints, eigentlich drei mit dem Desktop, vordefiniert. Eigene können simpel ergänzt werden. Diese sind bereits vorhanden:

breakpoints: {
  phone: 480,
  tablet: 1024
}

Die eigentliche Tabelle wird nun ganz klassisch mit den dafür vorgesehenen HTML-Tags gebaut. Das kann so aussehen:

Name Phone Email
Bob Builder 555-12345 bob@home.com
Bridget Jones 544-776655 bjones@mysite.com
Tom Cruise 555-99911 cruise1@crazy.com

Anhand des Aufbaus wird schnell deutlich, wie FooTable funktioniert. Die Klasse footable sorgt dafür, dass das Javascript die Tabelle erkennt und verarbeitet. Spalten, die auf bestimmten Auflösungen nicht gezeigt werden sollen, erhalten das Data-Attribut data-hide, gekoppelt mit der Angabe, für welche Breakpoints das gelten soll. Fertig!

Fazit: FooTables Ansatz ist sehr praktikabel und scheint mir bislang die sinnvollste Variante für Tabellen im responsiven Design zu sein. Es lohnt auf jeden Fall, das Plugin für kommende Projekte in Erwägung zu ziehen.

Links zum Beitrag:

  • Responsive Tables macht große Tabellen auf kleinen Geräten nutzbar – Dr. Web Magazin
  • Introducing FooTable – Themergency Blog
  • Responsive Demo mit verschiedenen Breakpoints – Themergency.com
  • FooTable im Repository – Github
  • Produktwebsite – FooTable

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

6 Kommentare

  1. Nach langem Suchen hab ich endlich mal einen Artikel auf Deutsch zu footables gefunden. Ich frag mich die ganze Zeit, wie ich das Plugin in WordPress einbinden kann? Über ein kurzes Tutorial würde ich mich sehr freuen. gerne auch per mail!

    LG Martin

Tut uns leid, aber die Kommentare sind geschlossen...

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

Cookies

Weitere Informationen zu den Auswahlmöglichkeiten findest du hier. Dazu musst du zunächst keine Auswahl treffen!

Um Dr. Web zu besuchen, musst du eine Auswahl treffen.

Deine Auswahl wurde gespeichert!

Informationen zu den Auswahlmöglichkeiten

Was du erlaubst!

Um fortfahren zu können, musst du eine Auswahl treffen. Nachfolgend erhältst du eine Erläuterung der verschiedenen Optionen und ihrer Bedeutung.

  • Ich stimme zu:
    Du erlaubst uns das Setzen aller Cookies, die wir in unseren Datenschutzhinweisen genannt haben. Dazu gehören Tracking- und Statistik-Cookies. Aus dem Tracking per Google Analytics bieten wir auf der Seite Datenschutz ein Opt-Out, also die Möglichkeit der Abmeldung, an.
  • Ich stimme nicht zu:
    Wir verzichten bei dieser Option auf den Einsatz von Google Analytics. Die für den Betrieb von Dr. Web notwendigen Cookies werden aber dennoch gesetzt. Einzelheiten entnimmst du bitte den Datenschutzhinweisen

Du kannst deine Cookie-Einstellungen jederzeit hier ändern: Datenschutz. Impressum

Zurück