Hilfe:Tabellen: Unterschied zwischen den Versionen

Aus ZUM-Unterrichten
(Navigation nach unten)
Markierung: 2017-Quelltext-Bearbeitung
(akt - Wie formatiert man eine Tabelle?)
Markierung: 2017-Quelltext-Bearbeitung
 
(Eine dazwischenliegende Version von einem anderen Benutzer wird nicht angezeigt)
Zeile 1: Zeile 1:
{{Box|Achtung|
'''Tabellen''' können im Wiki entweder mit den allgemein gängigen HTML-Elementen gestaltet werden oder mit Wikisyntax. Die Wikisyntax ist eingängig, schlank und einfach. Sie wird im Folgenden beschrieben. Der Gebrauch von HTML wird hingegen nicht näher erläutert, sondern als bekannt vorausgesetzt.
Der Einsatz von Tabellen in ZUM-Unterrichten ist weiterhin möglich und wird im ZUM-Wiki auf [https://wiki.zum.de/wiki/Hilfe:Tabellen Hilfe:Tabellen] ausführlich erklärt.


Allerdings sollten Tabellen '''nur für tabellarische Daten''' und nicht zur Gestaltung von Webseiten dienen.|Hervorhebung2}}
Tabellen sind kein grafisches Gestaltungsmittel. Sie dienen allein dem Zweck, gleichartige Informationen übersichtlich darzustellen. Da Tabellen deutlich komplizierter zu lesen sind als normaler Text, sollten sie nur dann eingesetzt werden, wenn sie ihren eigentliche Zweck erfüllen.


== Mehrspaltenlayout ==
{{Box|Empfehlung|Verwenden Sie zum leichteren Erstellen von Tabellen die Erweiterte Bearbeiten-Werkzeugleiste.|Hervorhebung2}}
Es gibt Vorlagen für ein Mehrspalten-Layout auf großen Bildschirmen. Die Spalten ordnen sich bei schmalem Display, aber auch bei geringer Auflösung (z.B. am Beamer), untereinander an.


=== 2-Spalten ===
== Auszeichnung von Tabellen in Wiki-Syntax ==
[[Vorlage:2Spalten]]


;So sieht's aus:
{| class="wikitable"
Die Hintergrundfarben dienen nur der Veranschaulichung.
! MediaWiki !! Beschreibung
{{Vorlage:2Spalten
|-
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
| <code><nowiki>{|</nowiki></code>
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
|Beginn der Tabelle (<em>vorgeschrieben</em>, entspricht <code><nowiki><table></nowiki></code>)
|-
| <code><nowiki>|+</nowiki></code>
| Tabellenüberschrift (<em>optional</em>, entspricht <code><nowiki><caption></nowiki></code>) Die Überschrift steht zwischen dem Beginn der Tabelle und der ersten Tabellenzeile. Sie kann nur einmal pro Tabelle verwendet werden.
|-
| <code><nowiki>|-</nowiki></code>
| Tabellenzeilen (entspricht <code><nowiki><tr></nowiki></code>) In der ersten Reihe optional.
|-
| <code><nowiki>!</nowiki></code>
| Tabellenkopfzelle, (<em>optional</em>, entspricht <code><nowiki><th></nowiki></code>) Stehen die Kopfzellen weiterer Spalten in einer Reihe, werden sie durch doppelte Ausrufezeichen (<code>!!</code>) getrennt, ansonsten steht zu Beginn jeder neuen Zeile ein Ausrufezeichen (<code>!</code>).
|-  
| class="code"  | <code><nowiki>|</nowiki></code>
| class="tabxpl" |Tabellendaten (<em>vorgeschrieben</em>, entspricht <code><nowiki><td></nowiki></code>)  Stehen die Tabellendaten weiterer Spalten in einer Reihe, werden sie durch doppelte senkrechte Striche (<code><nowiki>||</nowiki></code>) getrennt, ansonsten steht zu Beginn jeder neuen Zeile ein senkrechter Strich (<code><nowiki>|</nowiki></code>).
|-
| class="code"  | <code><nowiki>|}</nowiki></code>
| class="tabxpl" | Ende der Tabelle (entspricht <code><nowiki></table></nowiki></code>)
|}


}}
* Grundsätzlich muss jede Zeile und jede Spalte in einer neuen Zeile beginnen, sofern Sie nicht die doppelten senkrechten  Striche <code>||</code> bzw. Ausrufungszeichen <code>!!</code> verwenden.
* Jedes Auszeichnungselement (mit Ausnahme des Tabellenendes) kann optional ein oder mehrere HTML-Attribute beinhalten. Die Attribute stehen, getrennt durch einfachen Leerraum, in der gleichen Reihe wie die Auszeichnungs-Elemente. 
* Die Zellen und die Überschriften (<code>|</code> oder <code>||</code>, <code>!</code> oder <code>!!</code> sowie <code>|+</code>) führen Inhalt mit sich. Trennen sie Auszeichnung und Inhalt in einer Zeile durch einen senkrechten Strich (<code>|</code>). Der Inhalt einer Zelle folgt dann in der gleichen Zeile oder in der nächsten Zeile. Letzteres ist z.&nbsp;B. dann der Fall, wenn der Inhalt mit Wiki-Elementen ausgezeichnet ist, die ihrerseits eine neue Zeile benötigen (z.&nbsp;B. Listen, Aufzählungen oder verschachtelte Tabellen). Dann steht der Inhalt stets in einer neuen Reihe.
* Die Tabelle und die Tabellenzeilen (<code>{|</code> und <code>|-</code>) beinhalten nicht unmittelbar Inhalt. Hinter hier eingefügten Attributen folgt <strong>kein</strong> senkrechter Strich.


;Syntax:
== Eine einfache Tabelle ==
  <nowiki>{{2Spalten|
Spalte 1
|
Spalte 2
}} 
</nowiki>


=== 3-Spalten ===
Eine einfache, schmucklose Tabelle
Die Vorlage erlaubt es 3 Spalten zu erzeugen.


'''So sieht's aus:''' Die Hintergrundfarben dienen nur der Veranschaulichung.
<pre>
{{Vorlage:3Spalten
{|
|{{Box-spezial | Titel = Spalte 1 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | primär | 1}} }}
|Orangen
|{{Box-spezial | Titel = Spalte 2 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-links | 1}}}}
|Äpfel
|{{Box-spezial | Titel = Spalte 3 | Inhalt = |Rahmen = 0| Hintergrund = {{Farbe | sekundär-rechts | 1}}}}
|-
}}
|Brot
|Kuchen
|-
|Butter
|Eiskrem
|}
</pre>


;Syntax:
{|
  <nowiki>{{3Spalten|
|Orangen
  Spalte 1
|Äpfel
  |
|-
  Spalte 2
|Brot
  |
|Kuchen
  Spalte 3
|-
  }} 
|Butter
</nowiki>
|Eiskrem
Für spezielle Anforderungen gibt es noch 2 weitere Features: [[Vorlage:3Spalten]]
|}


=== NSpalten ===
&hellip; erzeugt eine Darstellung in n Spalten, die jeweils eine Mindestbreite von 20em haben. Sinnvoll ist dies vor allem für längere Aufzählungen. Gegenüber der Vorlage 2Spalten hat sie den Vorteil, dass man sich nicht händisch um die Verteilung des Inhalts in die Spalten zu kümmern braucht. Allerdings können einige ältere Browser damit nicht umgehen und stellen als Fallback nur eine Spalte dar.


Die Vorlage erwartet 2 Parameter. Als ersten die Spaltenanzahl und als zweiten den Text.
===Alternative===
<nowiki>{{nSpalten|4|
* text
* text
* text
}}</nowiki>


Optional lässt sich die Mindestbreite über den Parameter <code>min-width</code> verändern. Möchte man beispielsweise beliebig viele schmale Spalten, lässt sich das über eine große Angabe für die Spaltenanzahl steuern.
Ist der Inhalt Ihrer Tabelle kurz und knapp, besteht er also nicht aus langen (Ab)Sätzen, so kann die Verwendung von <code>||</code> einen lesbareren Code liefern. Fügen Sie zudem noch zusätzliche Leerzeichen ein, um die Lesbarkeit zu erhöhen. Die Darstellung der Tabelle verändert sich dadurch nicht.  


[[Vorlage:NSpalten]]
<pre>
{|
|  Orangen  ||  Äpfel  ||  mehr
|-
|  Brot    ||  Kuchen  ||  mehr
|-
|  Butter  ||  Eiskrem  ||  noch mehr
|}
</pre>


=== HTML-Markup ===
{|
Als Basis gibt es -1, -2, -3, -4 und -6 Breiten, wobei sich width-2-6 identisch verhält wie width-1-3.
| Orangen ||  Äpfel  ||  mehr
 
|-
Um die Inhalte in einer Spalte anzuordnen, schreibt man sie an die Stelle der drei Punkte (…) in den folgenden Beispielen. Dabei kann man auch Absätze, Listen, Tabellen etc. verwenden. 
|  Brot    ||  Kuchen ||  mehr
 
|-
<syntaxhighlight lang="html5">
| Butter  || Eiskrem ||  noch mehr
<div class="grid">
|}
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
<div class="width-1-3">...</div>
</div>
</syntaxhighlight>
 
<div class="grid">
<div class="width-1-3"><div style="background: #eee; padding: 3rem"><code>.width-1-3</code></div></div>
<div class="width-1-3"><div style="background: #eee; padding: 3rem"><code>.width-1-3</code></div></div>
<div class="width-1-3"><div style="background: #eee; padding: 3rem"><code>.width-1-3</code></div></div>
</div>
 
 
<syntaxhighlight lang="html5">
<div class="grid">
  <div class="width-1-2">...</div>
  <div class="width-1-2">...</div>
</div>
</syntaxhighlight>
 
<div class="grid">
<div class="width-1-2"><div style="background: #eee; padding: 3rem"><code>.width-1-2</code></div></div>
  <div class="width-1-2"><div style="background: #eee; padding: 3rem"><code>.width-1-2</code></div></div>
</div>
 
 
<syntaxhighlight lang="html5">
<div class="grid">
<div class="width-1-4">...</div>
  <div class="width-3-4">...</div>
</div>
</syntaxhighlight>
 
<div class="grid">
  <div class="width-1-6"><div style="background: #eee; padding: 3rem"><code>.width-1-6</code></div></div>
  <div class="width-5-6"><div style="background: #eee; padding: 3rem"><code>.width-5-6</code></div></div>
</div>


{{Hilfe Navigation}}
{{Hilfe Navigation}}

Aktuelle Version vom 21. Mai 2022, 13:51 Uhr

Tabellen können im Wiki entweder mit den allgemein gängigen HTML-Elementen gestaltet werden oder mit Wikisyntax. Die Wikisyntax ist eingängig, schlank und einfach. Sie wird im Folgenden beschrieben. Der Gebrauch von HTML wird hingegen nicht näher erläutert, sondern als bekannt vorausgesetzt.

Tabellen sind kein grafisches Gestaltungsmittel. Sie dienen allein dem Zweck, gleichartige Informationen übersichtlich darzustellen. Da Tabellen deutlich komplizierter zu lesen sind als normaler Text, sollten sie nur dann eingesetzt werden, wenn sie ihren eigentliche Zweck erfüllen.

Empfehlung
Verwenden Sie zum leichteren Erstellen von Tabellen die Erweiterte Bearbeiten-Werkzeugleiste.

Auszeichnung von Tabellen in Wiki-Syntax

MediaWiki Beschreibung
{| Beginn der Tabelle (vorgeschrieben, entspricht <table>)
|+ Tabellenüberschrift (optional, entspricht <caption>) Die Überschrift steht zwischen dem Beginn der Tabelle und der ersten Tabellenzeile. Sie kann nur einmal pro Tabelle verwendet werden.
|- Tabellenzeilen (entspricht <tr>) In der ersten Reihe optional.
! Tabellenkopfzelle, (optional, entspricht <th>) Stehen die Kopfzellen weiterer Spalten in einer Reihe, werden sie durch doppelte Ausrufezeichen (!!) getrennt, ansonsten steht zu Beginn jeder neuen Zeile ein Ausrufezeichen (!).
| Tabellendaten (vorgeschrieben, entspricht <td>) Stehen die Tabellendaten weiterer Spalten in einer Reihe, werden sie durch doppelte senkrechte Striche (||) getrennt, ansonsten steht zu Beginn jeder neuen Zeile ein senkrechter Strich (|).
|} Ende der Tabelle (entspricht </table>)
  • Grundsätzlich muss jede Zeile und jede Spalte in einer neuen Zeile beginnen, sofern Sie nicht die doppelten senkrechten Striche || bzw. Ausrufungszeichen !! verwenden.
  • Jedes Auszeichnungselement (mit Ausnahme des Tabellenendes) kann optional ein oder mehrere HTML-Attribute beinhalten. Die Attribute stehen, getrennt durch einfachen Leerraum, in der gleichen Reihe wie die Auszeichnungs-Elemente.
  • Die Zellen und die Überschriften (| oder ||, ! oder !! sowie |+) führen Inhalt mit sich. Trennen sie Auszeichnung und Inhalt in einer Zeile durch einen senkrechten Strich (|). Der Inhalt einer Zelle folgt dann in der gleichen Zeile oder in der nächsten Zeile. Letzteres ist z. B. dann der Fall, wenn der Inhalt mit Wiki-Elementen ausgezeichnet ist, die ihrerseits eine neue Zeile benötigen (z. B. Listen, Aufzählungen oder verschachtelte Tabellen). Dann steht der Inhalt stets in einer neuen Reihe.
  • Die Tabelle und die Tabellenzeilen ({| und |-) beinhalten nicht unmittelbar Inhalt. Hinter hier eingefügten Attributen folgt kein senkrechter Strich.

Eine einfache Tabelle

Eine einfache, schmucklose Tabelle 

{|
|Orangen
|Äpfel
|-
|Brot
|Kuchen
|-
|Butter
|Eiskrem 
|}
Orangen Äpfel
Brot Kuchen
Butter Eiskrem


Alternative

Ist der Inhalt Ihrer Tabelle kurz und knapp, besteht er also nicht aus langen (Ab)Sätzen, so kann die Verwendung von || einen lesbareren Code liefern. Fügen Sie zudem noch zusätzliche Leerzeichen ein, um die Lesbarkeit zu erhöhen. Die Darstellung der Tabelle verändert sich dadurch nicht. 

{|
|  Orangen  ||   Äpfel   ||   mehr
|-
|   Brot    ||   Kuchen  ||   mehr
|-
|  Butter   ||  Eiskrem  ||   noch mehr
|}
Orangen Äpfel mehr
Brot Kuchen mehr
Butter Eiskrem noch mehr


Hilfen im ZUM-Unterrichten: Vorlagen, allgemeine Hilfeseiten
Einstieg

Inhalte erstellen
Erste Schritte, Seiten anlegen, Links anlegen
Anforderungen an Seiten im ZUM-Unterrichten
Mindestumfang, gewünschte Artikel, Kategorien, Didaktik
Medien einbinden
Bilder, Videos, Geogebra, ZUMPad, etc., Lizenzen
Computer-Icon.svgInteraktive Übungen einbinden
H5P, Learningapps, R-Quiz

Vorlagen

Pfad-Icon.svg Lernpfade
Navigation, Lösung verstecken, Unterseiten
Kästen
Kästen für verschiedene Anwendungsfälle
Überblick
Überblick über weitere Hilfen

Wartung und Pflege


Wartung und Pflege
Spezialseiten, unbenutzte Kategorien, gesuchte Seiten

Abgerufen von „https://unterrichten.zum.de/index.php?title=Hilfe:Tabellen&oldid=127920“