Tabellen können in Media Wiki Seiten entweder direkt mit HTML Tabellenelementen geschrieben werden oder mit dem Wikicode. HTML Tabellenelemente und ihr Gebrauch werden auf verschiedenen Webseiten beschrieben und werden hier nicht besprochen. Der Wikicode nutzt Buchstaben Symbole um die Tabelle Struktur im Artikel zu bilden, die in der Ansicht durch HTML Tabellenelementen ersetzt werden.
Generel sollte man die Verwendung von Tabellen vermeiden, ausser es geht wirklich nicht anders. Der Tabellenaufbau kompliziert meist das bearbeiten von Seiten.
Zusammenfassung Wiki Tabellencode
Wiki Code |
vgl. HTML Code |
Beschreibung
|
{| |
<table> |
Tabellenanfang (Grundbestandteil)
|
|+ |
|
Tabellenüberschrift (Zusatzteil) nur einmal pro Tabelle zwischen Tabellenanfang und erster Reihe definierbar
|
|- |
<tr> |
Tabellenzeilen-Umbruch (Grundbestandteil) (Beginn neuer Zellenreihe)
|
! |
<th> |
Tabellenzeilen-Kopf (Zusatzteil) Mehrere Kopfzellen kann man durch zwei Ausrufezeichen (!! ) getrennt in dieselbe Codezeile schreiben.
|
| |
<td> |
Tabellenzelle (Grundbestandteil) Mehrere Zellen kann man durch zwei Pipes (|| ) getrennt in dieselbe Codezeile schreiben.
|
|} |
</table> |
Tabellenende (Grundbestandteil)
|
- Die angegebenen Zeichen müssen am Zeilenanfang stehen, ausgenommen die Doppelten || und !! für optional aufeinanderfolgende Zeilen in einer Reihe.
- XHTML - Eigenschaften. Außer dem Tabellenende akzeptiert jedes Zeichen ein oder mehrere optionale XHTML Eigenschaften. Die Eigenschaften müssen auf derselben Zeile stehen, wie das Zeichen und werden mit einem Leerzeichen voneinander getrennt.
- Kästchen, Überschriften und Kopfzeilen (| oder ||, ! oder !!, und |+) haben einen Textinhalt. Daher werden Eigenschaften vom Inhalt mit einem einfachen Pipesymbol (|) getrennt. Der Kästcheninhalt kann auf derselben oder darauffolgenden Zeilen wie die Eigenschaften stehen.
- Tabellen- und Zeilenzeichen ({| und |-) haben keinen direkten Inhalt. Setze kein Pipesymbol (|) nach ihren optionalen Eigenschaften. Wird fehlerhafterweise ein Pipesymbol nach den Eigenschaften gesetzt, wird der Parser dieses und die letzte Eigenschaft löschen, falls es direkt am Pipesymbol war.
- Inhalt kann (a) dem Kästchenzeichen auf derselben Zeile nach optionalen XHTML-Eigenschaften folgen oder (b) in Zeilen unter dem Kästchenzeichen. Inhalte mit Wiki Markup, die selbst eine neue Zeile benötigen, z.B. Listen, Überschriften oder verschachtelte Tabellen, müssen selbstverständlich auf ihren eigenen neuen Zeilen stehen.
- HTML-Tabellen können in Wikicode-Tabellen eingeschachtelt werden, jedoch nicht vermischt, d.h. man kann ein und dieselbe Tabelle nicht aus Wiki- und HTML-Code zusammenbauen.
Einfache Tabelle
Einfach Form
Die folgende Tabelle hat keine Ränder oder zusätzliche Leerräume. Zeigt aber den einfachen Wiki Code für eine Tabellenstruktur
Anzeige in Wiki
|
Wiki Code
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{|
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Alternative
Damit der Wikicode mehr wie eine Tabelle aussieht, können Tabellenzellen auf einer Zeile von || getrennt stehen. Dies ist ungünstig bei längerem Zelleninhalt, hilft aber bei kürzeren Inhalten wie im Beispiel der Übersichtlichkeit.
Zusätzliche Leerzeichen innerhalb der Tabelle können zur besseren Übersichtlichkeit hunzugefügt werden, wie in der Tabelle unten. Diese wirken sich nicht auf die Tabelle selbst aus.
HTML Eigenschaften können zu den Tabellenbeispielen, die auf dieser Seite stehen, hinzugefügt werden, wurden in diesem Beispiel jedoch der Einfachkeit halber ausgelassen.
Orange |
Apfel |
mehr
|
Brot |
Torte |
mehr
|
Butter |
Eis |
und mehr
|
|
{|
| Orange || Apfel || mehr
|-
| Brot || Torte || mehr
|-
| Butter || Eis || und mehr
|}
|
Mit HTML Eigenschaften
Durch das hinzufügen von HTML Eigenschaften lässt sich das Aussehen der Tabelle verändern.
border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
align="center" border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| align="center" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
align="right" border="1"
Eigenschaften lassen sich auch auf individuelle Zellen anwenden. Zahlen zum Beispiel sehen besser aus, wenn sie rechtsbündig stehen.
Orange
|
Apfel
|
12,333.00
|
Brot
|
Torte
|
500.00
|
Butter
|
Eis
|
1.00
|
|
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|-
|Butter
|Eis
|align="right"|1.00
|}
|
Man kann Eigenschaften auch nur auf bestimmte Reihen anwenden.
Orange
|
Apfel
|
12,333.00
|
Brot
|
Torte
|
500.00
|
Butter
|
Eis
|
1.00
|
|
{| border="1"
|Orange
|Apfel
|align="right"|12,333.00
|-
|Brot
|Torte
|align="right"|500.00
|- style="font-style:italic;color:green;"
|Butter
|Eis
|align="right"|1.00
|}
|
cellspacing="0" border="1"
Mit "cellspacing=0" werden Zellenzwischenräume entfernt.
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
cellpadding="20" cellspacing="0" border="1"
"cellpadding" legt eine Standardgröße für Zellen fest.
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Mit HTML Eigenschaften und CSS Definitionen
CSS Angaben können in Kombination mit oder ohne HTML Eigenschaften verwendet werden.
style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| style="color:green;background-color:#ffffcc;" cellpadding="20" cellspacing="0" border="1"
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Table mit TH Kopfzeile
TH (HTML Tabellenkopf) kann mit einem ! vor dem | erstellt werden. Diese Kopfzeile erscheint für gewöhnlich in fett und zentriert.
Tabellenkopf
pro Spalte
lecker
|
leckerer
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
!lecker
!leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Colspan="2"
leckerer
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
! colspan="2"|leckerer
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
seitliche Überschrift
standardmäßig
Obst
|
Orange
|
Apfel
|
Hauptspeise
|
Brot
|
Torte
|
Zutaten
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
!Obst
|Orange
|Apfel
|-
!Hauptspeise
|Brot
|Torte
|-
!Zutaten
|Butter
|Eis
|}
|
rechtsbündig
Seitliche Überschriften können wie folgt rechtbündig angeordnet werden.
Obst
|
Orange
|
Apfel
|
Hauptspeise
|
Brot
|
Torte
|
Zutaten
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
!align="right" |Obst
|Orange
|Apfel
|-
!align="right" |Hauptspeise
|Brot
|Torte
|-
!align="right" |Zutaten
|Butter
|Eis
|}
|
Beschriftung
Eine Tabellenbeschriftung kann wie folgt über jeder Tabelle hinzugefügt werden.
Speisen
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+Speisen
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Eigenschaften können der Beschriftung wie folgt zugewiesen werden
Speisen
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
|+align="bottom" style="color:#e76700;"|''Speisen''
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|
Tabellen mit H1, H2, H3 etc. Überschriften
HTML H1, H2, H3, H4 etc. können mit den dem Standardwikicode ==entsprechenden== Zeichen erzeugt werden und müssen alleine in einer Zeile stehen, um zu funktionieren.
Wenn du dir eine Vorschau der Seite zeigen lässt, so achte darauf, dass die ganze Tabelle in der Vorschau ist. Wenn man auf den Bearbeiten-button einer Überschrift in einer Tabelle klickt, wird die Vorschau fälschlicherweise keine Tabelle oder nur Bruchstücke zeigen, weil wichtige Teile der Tabelle fehlen.
Achte darauf, dass die Überschriften innerhalb von Tabellen zu den außerhalb der Tabellen passen, damit die Inhaltstabelle am Seitenanfang alles korrekt anzeigt.
Am leckersten
|
Orange
|
Apfel
|
Brot
|
Torte
|
Butter
|
Eis
|
|
{| border="1" cellpadding="20" cellspacing="0"
|colspan="2"|
===Am leckersten===
|-
|Orange
|Apfel
|-
|Brot
|Torte
|-
|Butter
|Eis
|}
|