Hilfe:Footable

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 kennst du vielleicht schon von den <nowiki></nowiki> Tags.

Unterstützter Wikitext

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

• ''italic''
• '''bold'''
• [[Sandkasten]]
• [[Sandkasten|alternative Beschreibung]]
• [http://lehramtswiki.de Lehramtswiki]

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

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. Ändere 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 dem 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

Hilfe:Navigation

• Allgemein
• Formatierung
• Links
• Bilder
• Tabellen
• Artikel erstellen
• Sandkasten
• Mobile Seite

Weiter in der Hilfe

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