Wikia

Star Fox-Wiki

Hilfe:Tabellen

Diskussion0
117Seiten in
diesem Wiki

  < Hilfe-Übersicht < Tabellen

Beispielhafte Tabelle in einem Wiki
Rieke HainHinzugefügt von Rieke Hain

Einfache Tabellen sind mit Wikisyntax schnell zu erstellen. Besondere Formen, insbesondere verschachtelte Tabellen erfordern aber ein bisschen Übung und sind oft mit XHTML-Kenntnissen besser zu entwickeln. Bedenke: Wikis sind primär zur schnellen und gemeinschaftlichen Textbearbeitung entwickelt worden, nicht für komplexe Layouts.

Inhaltsverzeichnis

Grundsätzliche Tipps Bearbeiten

Tipp!
  • Große Tabellen, die direkt am Anfang des Quelltextes einer Seite stehen, schrecken oft Neulinge ab, die versuchen, das erste Mal etwas in einem Wiki zu bearbeiten.
  • Vorlagen eignen sich gut zum Erstellen mehrfach verwendeter Infoboxen oder Navigationsleisten in Tabellenform. Hierdurch können komplizierte Quelltexte erheblich vereinfacht werden.

Einfache Tabellen Bearbeiten

Grundform Bearbeiten

Für einfache Tabellen gibt es zwei Grundschreibweisen, die zum gleichen Ergebnis führen.

Entweder Du schreibst alle Zellen untereinander oder Du schreibst – um Platz zu sparen – die Inhalte einer Tabellenzeile (mit mehreren Zellen) direkt hintereinander, dann werden die einzelnen Zellen mit zwei Strichen getrennt.

Eingabe Ergebnis

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

Zelle 1 Zelle 2
Zelle 3 Zelle 4

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

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Prettytable Bearbeiten

{{Prettytable}} (engl. für hübsche Tabelle) ist eine beliebte Vorlage, die normale Tabellen ohne aufwändiges Herumprobieren in ein einheitliches, ansprechendes Format bringt.

Eingabe Ergebnis

{| {{Prettytable}}
! bgcolor="#f1f1f1" | Überschrift 1
! bgcolor="#f1f1f1" | Überschrift 2
! bgcolor="#f1f1f1" | Ü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

Komplexere Tabellen Bearbeiten

Eine umfangreiche Übersicht zu Tabellen mit Rahmen, Farben, verbundenen Zellen und Verschachtelungen bietet die Wikipedia-Hilfeseite.

Benötigst Du Hilfe beim Tabellenerstellen, so nutze einfach die in der Hilfe-Übersicht angegebenen Fragemöglichkeiten.

Hilfe­    Übersicht · Stichwortverzeichnis
Greengrass-Q
Coding Diese Seite betrifft das Schreiben von Wiki-Quellcode.

Es fehlt noch eine Beschreibung, wie der grafische Editor dieselben Funktionen realisiert. Hilf mit, fehlende Infos einzutragen!

Beispieltabelle
Beispielhafte Tabelle in einem Wiki
SuperbotHinzugefügt von Superbot

Tabellen mit Wikisyntax zu erstellen kann ein Krampf sein. Irgendwann aber kommt man nicht mehr drum rum, spätestens dann, wenn man zum Beispiel eine Infobox als Vorlage erstellen möchte.

Inhaltsverzeichnis

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 gleich viele Zellen vorgegeben werden.

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

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

Inline-CSS

CSS-Stylings lassen sich auf die ganze Tabelle, einzelne Zeilen oder einzelne Zellen anwenden.

  • Style auf die gesamte Tabelle kommt als Attributzuweisung hinter den Tabellen-Seitenkopf in dieselbe Textzeile.
  • Style auf eine Zeile kommt in dieselbe Textzeile hinter das Steuerzeichen für die neue Tabellenzeile.
  • Bei Zellen kommt die Style-Aweisung vor den Zelleninhalt und wird mit einem zusätzlichen senkrechten Strich vom Inhalt getrennt.

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

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
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

Dieses 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 mitte
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
|  
| rowspan=2 | rechte Seite
|-
| | unten links
| | unten mitte
|}

{| 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>
|}

Links

  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).

Bilder

Neues Bild
126
Bilder in diesem Wiki
Alle Bilder ansehen >

Letzte Aktivitäten

Zeige mehr >

Aus dem Wikia-Netzwerk

Zufälliges Wiki