Community-Wiki

Achtung: Fandom stellt ab dem 31.12.2023 bis auf Weiteres den Support für die deutsche Sprache ein. Nach diesem Datum müssen alle Anfragen im englischen Community Central oder über das Kontaktformular gestellt werden.

MEHR ERFAHREN

Community-Wiki
Registrieren
Advertisement
Community-Wiki

Coding

Wiki-Code

Der folgende Text betrifft das Schreiben von Wiki-Syntax, die in einem Quelltexteditor eingegeben werden muss.

Beispieltabelle

Beispielhafte Tabelle in einem Wiki

Das Erstellen von Tabellen mit Wikisyntax kann mitunter eine große Herausforderung sein. Irgendwann aber kommt man nicht mehr drum rum, spätestens dann, wenn man zum Beispiel eine Infobox als Vorlage erstellen möchte.

Im VisualEditor einfügen[]

Der VisualEditor bietet eine einfache Handhabung, um Tabellen zu erstellen.

  1. Öffne eine Seite im VisualEditor.
  2. Unter dem Einfügen-Menüe wähle Tabelle.
    TableEdit

    4x4 erscheint nach dem Einfügen der Tabelle

  3. Ein 4 X 4 Raster wird erscheinen. Klicke auf eine Zelle und gib entweder deine Beschriftung oder deine Daten ein.
  4. Wenn du das Raster erweitern oder verkleinern möchtest, klicke auf die Pfeile, die die Tabelle umgeben, und du erhältst ein Dropdown-Menü, das dir die Möglichkeit bietet, die Struktur deiner Tabelle zu ändern.
    TableColumChange

    Klicke auf die Pfeile, um eine Änderung vorzunehmen

  5. Klicke auf Speichern, wenn du bereit bist deine Änderungen zu veröffentlichen.
    TableProperties

    Es gibt auch ein Menü „Eigenschaften“, um zusätzliche Attribute festzulegen

Einfache Tabellen[]

Grundform[]

Eine Tabelle besteht grundsätzlich aus gleich großen Zellen. Sie wird im Wikitext zeilen- und zellenweise definiert, also erst alle Spalten für Zeile 1, dann alle Spalten für Zeile 2, usw. Es muss darauf geachtet werden, dass für jede Zeile die passende Anzahl an Zellen hinzugefügt wird.

Im Prinzip schreibt man pro Wikitextzeile eins der folgenden Syntaxelemente:

Element Erklärung
{| beginnt eine Tabelle
|} beendet eine Tabelle
| »blablabla« fügt an die aktuelle Zeile eine Zelle mit Inhalt an
! »blablabla« fügt an die aktuelle Zeile eine Überschriftenzelle mit Inhalt an
|- beginnt eine neue Zeile
|+ »blablabla« lässt über der Tabelle eine Überschrift anzeigen

Um Platz zu sparen, kann man die Inhalte einer Tabellenzeile (mit mehreren Zellen) direkt hintereinander schreiben, dabei werden dann die einzelnen Zellen mit zwei Strichen getrennt.

Beispiel
Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|-
| Zelle 3 || Zelle 4
|}

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Tabellenklassen[]

Standardmäßig hat eine Tabelle unsichtbare Ränder und einen durchsichtigen Hintergrund. Mithilfe von CSS-Klassen lassen sich Tabellen ohne aufwendiges Herumprobieren in ein einheitliches, ansprechendes Aussehen bringen.

Klassenzuweisungen erfolgen in der Kopfzeile einer Tabelle. Mehrere Klassen werden durch Leerzeichen getrennt zwischen die Anführungszeichen geschrieben. Die folgenden Klassen sind in jedem Wiki vordefiniert:

Eingabe Ergebnis

{| class="article-table"
! Überschrift 1 !! Überschrift 2
! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis

{| class="wikitable"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis

{| class="infobox"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Sortierbare Tabellen[]

Die Klasse sortable fügt den Spalten einer Tabelle Sortierknöpfe hinzu:[1]

Eingabe Ergebnis

{| class="wikitable sortable"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 6 || Zelle 9
|-
| Zelle 2 || Zelle 5 || Zelle 7
|-
| Zelle 3 || Zelle 4 || Zelle 8
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 6 Zelle 9
Zelle 2 Zelle 5 Zelle 7
Zelle 3 Zelle 4 Zelle 8

Siehe auch: Hilfe:sortierbare Tabellen

Einklappbare Tabellen[]

Die Klasse mw-collapsible lässt eine Tabelle per Klick zusammenklappen, sodass nur noch die erste Zeile angezeigt wird. Wenn die Tabelle von Anfang an zusammengeklappt sein soll, muss zusätzlich die Klasse mw-collapsed hinzugefügt werden:[1]

Eingabe Ergebnis

{| class="wikitable mw-collapsible mw-collapsed"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Siehe auch: mediawikiwiki:Manual:Collapsible elements

Inline-CSS[]

CSS-Stylings lassen sich auf die ganze Tabelle, einzelne Zeilen oder einzelne Zellen anwenden. Dabei werden die CSS-Anweisungen einem Style-Attribut zugeordnet, so wie man es auch innerhalb eines HTML-Tags machen würde.

  • Style für die gesamte Tabelle folgt rechts hinter den Tabellen-Seitenkopf.
  • Style für eine Tabellenzeile kommt hinter das Steuerzeichen, das die neue Zeile einleitet.
  • Bei einzelnen Zellen kommt die Style-Anweisung vor dem Zelleninhalt und wird mit einem einzelnen senkrechten Strich abgeschlossen und vom eigentlichen Inhalt getrennt.

Siehe Hilfe:Inline-CSS#Tabellen zu den eigentlichen Gestaltungsmöglichkeiten.

Beispiele:
Eingabe Ergebnis[2]

{| class="wikitable" style = "border: medium dotted blue; color:green; background-color:lime; font-style:italic; font-variant:small-caps;"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis[2]

{| class="wikitable"
|- style="border:medium dotted blue; color:green; background-color:lime; font-style:italic; font-variant:small-caps;"
! Überschrift 1
! Überschrift 2 !! Überschrift 3
|-
| Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || Zelle 5 || Zelle 6
|- style="border:medium dotted blue; color:green; background-color:lime; font-style:italic; font-variant:small-caps;"
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9
Eingabe Ergebnis

{| class="wikitable"
! Überschrift 1
! Überschrift 2 !! style = "border: medium dotted blue; color: green; background-color:lime; font-style:italic; font-variant:small-caps;" | Überschrift 3
|-
| style = "border: medium dotted blue; color: green; background-color:lime; font-style:italic; font-variant:small-caps;" | Zelle 1 || Zelle 2 || Zelle 3
|-
| Zelle 4 || style = "border: medium dotted blue; color: green; background-color:lime; font-style:italic; font-variant:small-caps;" | Zelle 5 || Zelle 6
|-
| Zelle 7 || Zelle 8 || Zelle 9
|}

Überschrift 1 Überschrift 2 Überschrift 3
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5 Zelle 6
Zelle 7 Zelle 8 Zelle 9

Zellen vereinen[]

Übergreifende Zellen lassen sich mit colspan="…" (über wieviele Spalten soll die Zelle nach rechts gehen?) und rowspan="…" (über wieviele Zeilen soll die Zelle nach unten gehen?) definieren. Diese Anweisungen kommen an dieselben Stellen wie Stylevorgaben für einzelne Zellen.

Beispiel[]

Beispiel
Eingabe Ergebnis

{| class="wikitable"
| colspan="3" | Zelle 1
|-
| Zelle 2
| rowspan="2" | Zelle 3
| Zelle 4
|-
| rowspan="2" | Zelle 5 || Zelle 6
|-
| colspan="2" | Zelle 7
|}

Zelle 1
Zelle 2 Zelle 3 Zelle 4
Zelle 5 Zelle 6
Zelle 7

Erweitertes Beispiel[]

Das folgende erweiterte Beispiel zeigt einige Anwendungen in Kombination und nutzt ein paar Tricks:

  1. Die Tabelle besteht eigentlich aus zwei Tabellen.
  2. Statt einer einzeiligen und einspaltigen Tabelle werden die HTML-Tags <div style="…">…</div> genutzt, um eine Box zu modellieren.
Ein Beispiel-Layout
Erste Überschrift Zweite Überschrift
oben links rechte Seite
unten links unten mittig
RTE table RTE table
Willkommen in der Zwillingsstadt
{| border="1" style="border-collapse:collapse; width:330px"
|+'''Ein Beispiel-Layout'''
|-
!            style="background:#efefef; color:#111"| Erste Überschrift
!colspan="2" style="background:#ffdead; color:#111"| Zweite Überschrift
|-
| oben links
| <!-- leer -->
|rowspan="2"| rechte Seite
|-
| unten links
| unten mittig
|}

{| style="border:1px solid; border-top:none; width:330px;"
|-
| [[Datei:RTE table.png]]
| [[Datei:RTE table.png]]
|-
|style="text-align:center" colspan="2"| <div style="border:1px solid red;">Willkommen in der Zwillingsstadt</div>
|}

Bewährte Methoden mit Tabellen[]

Obwohl Tabellen für das Design verwendet werden können, sollten sie nicht. Die Ergebnisse auf mobilen Geräten sind unschön, weil Tabellen nicht sehr reaktionsfähig sind. Das heißt, dass Tabellen auf unterschiedlich großen Bildschirmen anders aussehen - und oft unschön sind. Wenn du Bilder in Tabellen einfügst, können die Ergebnisse auf einem Smartphone leicht unleserlich werden. Und wenn du ganze Seiten oder Abschnitte von Artikeln aus Tabellen machst, wäre es wahrscheinlich gut, diese Strategie zu überdenken.

Stattdessen sollten Tabellen, wie seit mindestens 2004 argumentiert wird, nur Daten enthalten.

Bei der Verwendung von Tabellen sind einige spezifische Dinge zu beachten:

  • Wenn du die Anzahl der Spalten erhöhst, steigt die Wahrscheinlichkeit, dass deine Tabelle auf einem mobilen Gerät nicht richtig angezeigt wird. Überlege daher sorgfältig, ob du all diese Spalten brauchst.
  • In einigen Spielen werden Icons großzügig verwendet, was bedeutet, dass man sagen kann, dass Icons notwendig und oft hilfreich sind. Wenn du ein Wiki wie dieses betreibst, solltest du sicherstellen, dass alle Bilder, die du in deinen Tabellen verwendest, auf die gleiche Größe zugeschnitten sind und diese Größe nicht größer ist als nötig. Alles, was über 25px Breite hinausgeht, könnte zu Problemen führen. Stelle außerdem sicher, dass du Text neben den Icons verwendest, damit diejenigen, die nicht wissen, was die Icons bedeuten, sie verstehen.
  • Es ist sehr üblich, dass Wikis oben auf den Seiten Hinweise - wie ein Lösch-Hinweis - mit Hilfe von Tabellenformatierungen anbringen. Diese sind typischerweise auf Smartphones problematisch, und die meisten Leser auf mobilen Geräten interessieren sich nicht dafür. Du kannst das Problem umgehen, indem du sicherstellst, dass sie den Vorlagentyp Hinweis haben.
  • Ähnlich wie oben ist es in Wikis sehr üblich, Navigationsboxen (Navboxes) zu erstellen, die am Ende von Artikeln mit Hilfe von Tabellen formatierten Links zu verwandten Artikeln anbieten. Stelle sicher, dass diese den Vorlagentyp Navbox haben.
  • Prüfe immer, wie deine Tabelle auf einem Smartphone aussieht.

Links[]

Anmerkungen[]

  1. 1,0 1,1 Diese Funktion benötigt aktiviertes Javascript im Browser.
  2. 2,0 2,1 Der Hintergrund der Überschriftenzellen wird in den ersten beiden Beispielen nicht geändert, weil ihr Hintergrund über die Klasse "wikitable" vorgegeben ist und unsere Hintergrundvorgaben für Tabellen bzw. Zeilen überschreibt. Erst wenn wir tatsächlich den Hintergrund direkt für Zellen vorgeben, hat unsere händische Vorgabe Vorrang. Dies ist eine elementare Eigenschaft kaskadierender Stylesheets (Cascading stylesheets).

Mehr Hilfe[]

Advertisement