Hilfe: Footable

Aus LehramtsWiki
Wechseln zu: Navigation, Suche


Footable ist eine Extension, um im Wiki anpassbare Tabellen zu zeichnen. Dabei werden Tabellenspalten priorisiert und Spalten mit niedriger Priorität auf kleinen Dislays ausgeblendet. Über einen Druck auf die entsprechende Zeile werden alle Spalten angezeigt.

Einbindung in Wikitext

Tabellen, die sich an die Größe des Browserfensters anpassen lassen sollen, werden in HTML-Tabellen geschrieben und über diesen Code eingebunden:

 <footable>
 Tabellenmarkup
 </footable>

Eine spitze Klammer auf gefolgt von einem Wort und einer spitzen Klammer zu nennt man Tag. Es gibt einen öffnenden Tag, z.B. <footable> und einen schließenden Tag </footable>. Dies kennt ihr vielleicht von den <nowiki></nowiki> Tags.

Unterstützter Wikitext

Ab sofort unterstützt Footable auch grundlegende Wikitext-Auszeichnungen. Hier eine Übersicht aller Wikitext-Schreibweisen, die korrekt umgewandelt werden:

  • ''italic''
  • '''bold'''
  • [[Sandkasten]]
  • [[Sandkasten|alternative Beschreibung]]
  • [http://lehramtswiki.de Das Lehramtswiki]
  • <blank>http://news.google.de</blank>
  • <blank text="Google News aufrufen">http://news.google.de</blank>

Alle hier nicht aufgeführten Wikitext-Formatierungen funktionieren nicht.




Tabellenmarkup

HTML ist eine Auszeichnungssprache, d.h. Inhalt wird in eine gewisse Struktur gebracht, um jenen entsprechend anzeigen zu können. Wie auch bei Wikitext-Tabellen gibt es bestimmte reservierte Wörter bzw. Zeichenfolgen, um diese Struktur vorzugeben. Hier seien nun die Grundlagen kurz erklärt. Du wirst feststellen, dass dein Vorwissen mit Wikitext-Tabellen vollkommen ausreichen wird, da eigentlich nur die Worte ersetzt werden.

Grundlagen

Um die Footable-Extension so flexibel wie möglich zu halten, muss zu Anfang explizit definiert werden, dass eine Tabelle folgt. Dies geht so:

 <footable>
  <table class="footable">
  </table>
 </footable>
 

Unser Tag <footable></footable> weist an, dass alles im inneren als reiner HTML Quellcode zu behandeln ist. Der Tag <table></table> zeichnet eine Tabelle. Aktuell ist diese aber noch leer. Der Zusatz class="footable" wird zwingend benötigt, damit das Werkzeug, was die Tabellenumformungen durchführt, weiß welche Tabellen es benutzen soll.

Eine Tabelle wird in zwei Bereiche eingeteilt:

  1. Kopfbereich: Dieser enthält alle Infrmationen zur Überschriftenzeile der Tabelle, sowie beschreibende Informationen, welche Spalten wann angezeigt werden sollen. Ausgewiesen durch <thead></thead>
  2. Inhaltsbereich: Hier stehen die eigentlichen Nutzdaten der Tabelle Zeile für Zeile. Ausgewiesen durch <tbody></tbody>
 <footable>
  <table class="footable">
   <thead>
   </thead>
   <tbody>
   </tbody>
  </table>
 </footable>
 

Hier sind sowohl der Kopfbereich als auch der Inhaltsbereich eingefügt. Jede Tabelle muss diese Form haben, sonst arbeitet das Werkzeug nicht richtg.

Kopfbereich

Im Kopfbereich werden die Struktur einer Tabelle und Überschriften für die einzelnen Spalten festgelegt. Hier eine Beispielkopfzeile mit komplettem Quellcode:

 <footable>
  <table class="footable">
   <thead>
    <tr>
     <th data-hide="phone">
      Name
     </th>
     <th>Vorname</th>
     <th data-hide="phone,tablet">
      Adresse
     </th>
     <th data-hide="phone">
      Wohnort
     </th>
     <th data-hide="phone,tablet">
      Schuhgröße
     </th>
    </tr>
   </thead>
   <tbody>
   </tbody>
  </table>
 </footable>
 

Wir konzentrieren uns hier nur auf den Bereich, der im Kopfbereich steht. Der Tag <tr></tr> schreibt eine neue Zeile (kurz für table row). Weiter fällt uns auf, dass wir dort fünf Eintrage des Tags <th></th> haben. Diese repräsentieren fünf Spalten als Überschriften (kurz für table headline). Unser Kopfbereich für eine Tabelle wäre damit voll funktionsfähig uns fertig. Da das Footable Werkzeug Tabellenspalten ausblendet, müssen wir im Kopfbereich definieren, welche Spalten ausgeblendet werden sollen. Dafür gibt es den Zusatz data-hide. Es gibt drei / vier Werte:

  • (nichts): Wird der Zusatz komplett weggelassen, so wird die Spalte immer angezeigt. Dies sollte auf maximal zwei Spalten in der gesamten Tabelle zutreffen.
  • phone: Wenn du einer Überschriftenspalte den Zusatz data-hide="phone" gibst, so wird diese Spalte auf kleinen Dislays ausgeblendet.
  • tablet: Der Zusatz data-hide="tablet" zeigt die markierte Spalte auf mittelgroßen Displays (für gewöhnlich Tablets etc.) nicht an. Einzeln wirst du diese ption vermutlich kaum gebrauchen können. Daher beachte den letzten Wert:
  • phone,tablet: Der Zusatz data-hide="phone,tablet" versteckt Spalten sowohl auf mittelgrßen als auch auf kleinen Displays. Benutze dies am besten um sehr unwichtige Spalten oder Spalten mit nur einer Zahl auszublenden.

Als Zusammenfassung hier eine kurze Übersicht, welche Spalten bei welcher Displaygröße sichtbar wären:

  • großer Bildschirm: Name, Vorname, Adresse, Wohnort, Schuhgröße
  • Tablet: Name, Vorname, Wohnort
  • Handy: Vorname

Bitte testen

Im eigenen Interesse wäre es gut, wenn du vor dem Veröffentlichen deine Auswahl testest. Änder dafür die größe deines Browserfensters und sieh nach, ob die von dir gemachten Einstellungen sinnvoll sind. Vielleicht sind einige Einträge in bestimmten Spalten zu lang um bspw. auf den Handy dargestellt zu werden.

Inhaltsbereich

Im Inhaltsbereich stehen die reinen Nutzdaten ohne Schnickschnack. Hier ein Beispiel mit zwei Einträgen ohne das ganze Markup außen rum:

 <tbody>
  <tr>
   <td>Pan</td>
   <td>Peter</td>
   <td>Nimmerland 4</td>
   <td>Nimmerland</td>
   <td>12</td>
  </tr>
  <tr>
   <td>Musterfrau</td>
   <td>Milena</td>
   <td>Bergwaldseestraße 4</td>
   <td>Musterhause</td>
   <td>38</td>
  </tr>
 </tbody>
 

Die Struktur ist identisch zum Kopfbereich. Eine neue Zeile wird mit <tr></tr> erzeugt. Neu ist, dass eine Spalte nicht mehr mit <th> sondern hier mit <td></td> ausgewiesen wird.

Zusammenfassung

Hier gibt es das komplette Beispiel als Quellcode und anschließend als funktionierende Tabelle.

 <footable>
  <table class="footable">
   <thead>
    <tr>
     <th data-hide="phone">
      Name
     </th>
     <th>Vorname</th>
     <th data-hide="phone,tablet">
      Adresse
     </th>
     <th data-hide="phone">
      Wohnort
     </th>
     <th data-hide="phone,tablet">
      Schuhgröße
     </th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>Pan</td>
     <td>Peter</td>
     <td>Nimmerland 4</td>
     <td>Nimmerland</td>
     <td>12</td>
    </tr>
    <tr>
     <td>Musterfrau</td>
     <td>Milena</td>
     <td>Bergwaldseestraße 4</td>
     <td>Musterhause</td>
     <td>38</td>
    </tr>
   </tbody>
  </table>
 </footable>
 

Name Vorname Adresse Wohnort Schuhgröße
Pan Peter Nimmerland 4 Nimmerland 12
Musterfrau Milena Bergwaldseestraße 4 Musterhause 38

Weiter in der Hilfe

Jetzt hast du alles dabei um deinen ersten neuen Artikel zu schreiben.