Hilfe:Tabellen-Referenz

aus ZUM-Wiki, dem Wiki für Lehr- und Lerninhalte auf ZUM.de
Wechseln zu: Navigation, Suche

Diese Seite enthält eine ausführliche Darstellung der MediaWiki-Tabellensyntax. Für einen Schnelleinstieg siehe Hilfe:Tabellen.

Jede Tabelle im Wiki-Stil beginnt mit einer geschweiften Klammer { gefolgt von einem senkrechten Strich | und endet mit einem Strich | gefolgt von einer geschweiften Klammer }. Die öffnende Klammer muss als erstes Zeichen der Zeile stehen.

Inhaltsverzeichnis

Einfache Tabellen

Jede Zelle innerhalb der beiden Klammern beginnt mit einem senkrechten Strich. Dieser macht den Beginn einer neuen Zelle deutlich. Direkt hinter diesem Strich steht entweder der Inhalt der Zelle oder Attribute (z. B. Rowspanning – siehe unten). Der Strich kann am Anfang der Textzeile stehen oder auch mittendrin, dann muss man zwei Striche schreiben. Jedoch sollte man ihn nur am Anfang einer Textzeile verwenden, um die Tabellenstruktur übersichtlich zu halten. Wichtig ist auch, dass jede Zelle mit einem Zeilenumbruch beendet wird.

Eine Tabelle mit zwei Zellen in einer Tabellenzeile sieht im Text so aus:

Eingabe Ergebnis

{|
| Zelle 1
| Zelle 2
|}

Zelle 1 Zelle 2

Bitte beachten:

{| |Einzelzelle |}

funktioniert nicht! Der Zeilenvorschub (Return) ist wichtiger Bestandteil der Tabellensyntax.

Tabelle mit mehreren Tabellenzeilen

Natürlich benötigt man hauptsächlich Tabellen mit mehreren (Tabellen-)Zeilen. Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter dem senkrechten Strich einen waagrechten - setzt. Dies lässt sich beliebig oft wiederholen.

Eingabe Ergebnis

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

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit || trennen. Eine Tabelle mit drei Zeilen stellt sich also folgendermaßen dar:

Eingabe Ergebnis

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

bzw.

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

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

Tabellen im Schreibmaschinenstil ohne Formatierungen

Die einfachste und schnellste WikiWiki-Art, eine Tabelle zu erstellen, ist der Schreibmaschinenstil (siehe auch Hilfe Textgestaltung – vorformatierter Text mit einem Leerzeichen am Zeilenanfang). Dazu stellt man jeder Tabellenzeile ein Leerzeichen voran. Spalten und Layout werden visuell im Bearbeitungsmodus angepasst. Das Ergebnis entspricht anschließend genau der Ansicht im Bearbeitungsmodus. Dabei sollte bedacht werden, dass diese Formatierung die Breite der Druckversion nicht überschreitet (ca. 780 px bei Normalschriftgröße) und auf kleineren Bildschirmen, PDAs etc. ärgerlich sein kann (siehe auch Wikipedia:Wikipedia-CD).

Beispiel und Ergebnis:

Klimatabelle
Monat                     JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ
-------------------------------------------------------------------------
Ø Tagestemperatur in °C    21  21  22  23  24  25  27  29  28  26  24  22
Ø Nachttemperatur in °C    15  15  15  16  17  18  20  21  20  19  18  16
Ø Sonnenstunden pro Tag     6   6   7   8   9   9   9   9   8   7   6   5
Ø Regentage pro Monat       6   4   3   2   2   1   0   0   2   5   6   7
Ø Wassertemperatur in °C   19  18  18  18  19  20  21  22  23  23  21  20

Komplexere Tabellen

Rahmen

Bis jetzt haben unsere Tabellen noch keine Umrandungen. Die Umrandung wird in der ersten Zeile (direkt hinter dem {|) festgelegt. Momentan kann nur die Rahmenstärke festgelegt werden – mit dem Argument: border="x", wobei x die Stärke des Rahmens ist.

Das letzte Beispiel von oben sieht mit Rahmen im Text so aus:

Eingabe Ergebnis

{| border="1"
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

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

Mit border="3" erhält man:

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

Titelzeilen

Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit „!“ statt „|“ eingeleitet werden. In diesen Zellen erscheint der Text nun zentriert und fett:

Eingabe Ergebnis

{| border="1"
! Was
! Warum
|-
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|-
| Zelle 5
| Zelle 6
|}

Was Warum
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5 Zelle 6

Spalten- und zeilenübergreifende Darstellung

Auch mit der neuen Wiki-Syntax ist es, genauso wie bei HTML, möglich, daß eine Zelle über mehrere Spalten reicht (colspan) oder Zeilen überspannt (rowspan). Rowspan- und colspan-Angaben werden der Zelle als Attribute mitgegeben, und zwar nach dem Prinzip

| Attribute | Inhalt

Eine Tabelle mit einer Zelle, die über zwei Spalten geht (colspan="2") sieht so aus:

Eingabe Ergebnis

{| border="1"
! A
! B
! C
|-
| Zelle 1
| colspan="2" align="center" | Zelle 2
|-
| Zelle 3
| Zelle 4
| Zelle 5
|}

A B C
Zelle 1 Zelle 2
Zelle 3 Zelle 4 Zelle 5

Eine Tabelle mit einer Zelle, die über zwei Zeilen geht (rowspan="2") sieht so aus:

Eingabe Ergebnis

{| border="1"
! A
! B
|-
| rowspan="2" align="center" | Zelle 1
| Zelle 2
|-
| Zelle 4
|}

A B
Zelle 1 Zelle 2
Zelle 4

Und kombiniert:

Eingabe Ergebnis

{| border="1"
! A
! B
! C
|-
| rowspan="2" colspan="2" | A1 & B1 & A2 & B2
| C1
|-
| C2
|-
| A3
| B3
| C3
|}

A B C
A1 & B1 & A2 & B2 C1
C2
A3 B3 C3

Leere Zellen in Tabellen mit Rahmen

Leere Zellen werden in einer Tabelle nicht umrahmt. Um in manchen Browsern trotzdem einen Rahmen zu bekommen, kann man ein geschütztes HTML-Leerzeichen   setzen. So sieht normalerweise eine Tabelle mit Leerzellen aus:

'normal'
Zelle 1 Zelle 2
Zelle 9 Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Das gleiche Beispiel mit geschützten HTML-Leerzeichen im Text:

Eingabe Ergebnis

{| border="1"
!colspan="4" align="center" | 'sicherer'
|-
| Zelle 1
| Zelle 2
|  
|  
|-
|  
|  
|  
|  
|-
| Zelle 9
|  
|  
| Zelle 12
|-
| Zelle 13
| Zelle 14
| Zelle 15
| Zelle 16
|}

'sicherer'
Zelle 1 Zelle 2    
       
Zelle 9     Zelle 12
Zelle 13 Zelle 14 Zelle 15 Zelle 16

Verschachtelte Tabellen

Das Verschachteln ist mit der neuen Wiki-Syntax denkbar einfach. Man muss nur an der Stelle, an der man eine weitere Tabelle innerhalb einer anderen Tabelle wünscht, eine neue öffnende Klammer setzen. Wichtig ist es nur, dass dort am Anfang der Textzeile ausnahmsweise kein senkrechter Strich stehen darf! Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

Eingabe Ergebnis

{| border="1"
| Zelle 1
|
{| border="2"
| Zelle A
|-
| Zelle B
|}
| Zelle 3
|}

Zelle 1
Zelle A
Zelle B
Zelle 3

Beschriftung

Mit der neuen Wiki-Syntax ist es leicht möglich, eine Beschriftung über der Tabelle anzugeben. Diese Beschriftung ist zentriert und maximal genauso breit wie die Tabelle mit automatischem Zeilenumbruch. Um eine Beschriftung einzubauen reicht es, nach dem senkrechten Strich und vor dem Text ein Plus + zu setzen. Innerhalb der Beschriftung kann man ganz normal mit der Wiki-Syntax formatieren.

Eine Tabelle mit Beschriftung sieht im Text so aus:

Eingabe Ergebnis

{| border="1"
|+ Dies ist eine Beschriftung, die ''ziemlich'' lang ist.
| Zelle 1
| Zelle 2
|-
| Zelle 3
| Zelle 4
|}

Dies ist eine Beschriftung, die ziemlich lang ist.
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Aufzählungszeichen

Will man Aufzählungszeichen in einer Tabelle verwenden, so muss der erste Listeneintrag in einer neuen Zeile beginnen. Andernfalls wird beim ersten Eintrag anstatt eines Aufzählungszeichens ein Sternchen angezeigt.

Eingabe Ergebnis

{| border="1"
|* erster Eintrag
* zweiter Eintrag
|}

* erster Eintrag
  • zweiter Eintrag

{| border="1"
|
* erster Eintrag
* zweiter Eintrag
|}

  • erster Eintrag
  • zweiter Eintrag

Sortierbare Tabellen

Tabellen können auch nach ihren Werten pro Spalte sortiert werden. Dazu muss class="sortable" im Tabellenkopf angegeben werden.

Eingabe Ergebnis

{| class="sortable"
! Spalte 1
! Spalte 2
! Spalte 3
|-
| 12346
| € 234,44
| fghij
|-
| 98765
| € 77,55
| abcde
|}

Spalte 1 Spalte 2 Spalte 3
12346 € 234,44 fghij
98765 € 77,55 abcde

Einschränkungen: Damit Zahlen nach ihren numerischen Werten korrekt sortiert werden, dürfen sie bislang keine Einheiten (außer den Währungszeichen € und $) oder andere Beschriftungen enthalten. Ein Hinweis auf die verwendeten Einheiten sollte daher in der Kopfzeile angegeben werden.

Soll eine Spalte mit römischen Zahlen numerisch sortiert werden, so kann dafür die Vorlage RomZahl genutzt werden. Näheres auf der Vorlagenseite.

Bei komplexen Tabellen (d. h. solchen mit ungleichmäßigen Reihen und Spalten) ist eine Sortierung nicht möglich.

Weitere Informationen sind auf meta:Help:Sorting verfügbar (englisch).

Formatierungen

Farben, Ränder, Abstände und Spaltenbreiten können durch CSS-Styles vielfältig beeinflusst werden. Bevor man sich dazu entschließt, sollte man über die Notwendigkeit des Unterfangens nachgedacht haben und auch Bestrebungen zur Vereinheitlichung berücksichtigen (siehe „Tabellen einbinden“ in „Wie sehen gute Artikel aus“ und Formatvorlagen).

Spaltenbreiten

Spaltenbreiten können relativ und absolut angegeben werden, wobei absolute Angaben in Pixeln sinnvoll nur beim Einbinden von Grafiken eingesetzt werden sollten. Die Breitenangabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll. Ist der Inhalt einer Zelle größer als die vorgegebene Spaltenbreite, dann wird die Spalte automatisch erweitert und die Vorgabe der Spaltenbreite damit unwirksam.

Eingabe Ergebnis

{| border="1"
! width="10%" | 10 %
! width="20%" | 20 %
! width="40%" | 40 %
|-
| A
| B
| C
|}

10 % 20 % 40 %
A B C

{| border="1"
! width="50" | 50
! width="100" | 100
! width="200" | 200
|-
| A
| B
| C
|}

50 100 200
A B C

Zellenabstände mit cellspacing und cellpadding

Mit cellspacing kann der Abstand zwischen den Zellen festgelegt werden. Je größer der Cellspacing-Wert, desto breiter wird der Steg zwischen den Zellen. Mit cellpadding bestimmt man den Abstand des Zellinhaltes vom Zellrahmen. Das CSS-Attribut style="border-collapse:collapse;" lässt zusammenfallende Zellumrandungen verschwinden.

Eingabe Ergebnis

{|
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="0"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="10" cellpadding="10"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

{| border="1" cellspacing="0" cellpadding="10" style="border-collapse:collapse;"
| Alpha || Beta || Gamma
|-
| Delta || Epsilon || Zeta
|}

Alpha Beta Gamma
Delta Epsilon Zeta

Ausrichtung

Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten. Dabei kann man die Attribute einzelnen Zellen oder auch ganzen Zeilen zuweisen. Für die Ausrichtung wird der Einsatz von CSS-Befehlen empfohlen, das vertical-align gilt jeweils für die ganze Zeile, das text-align nur für die jeweilige Zelle.

Eingabe Ergebnis

{| border="1" cellspacing="0"
!
! style="text-align:left" | Links
! style="text-align:center" | Zentriert
! style="text-align:right" | Rechts
|- style="vertical-align:top"
! style="height:38px" | Oben
| style="text-align:left" | xx
| style="text-align:center" | xxx
| style="text-align:right" | xx
|- style="vertical-align:middle"
! style="height:38px" | Mitte
| style="text-align:left" | x
| style="text-align:center" | x
| style="text-align:right" | x
|- style="vertical-align:bottom"
! style="height:38px" | Unten
| style="text-align:left" | x
| style="text-align:center" | x
| style="text-align:right" | x
|}

Links Zentriert Rechts
Oben xx xxx xx
Mitte x x x
Unten x x x

Andere HTML-Formatierungen

Mit der neuen Wiki-Syntax ist es möglich, alte HTML-Formatierungen zu übernehmen, z.B. Zellen farbig zu hinterlegen (style="background:#ABCDEF;", Farbtabelle) oder Rahmen andere Farben zu geben. Diese Vorgehensweise ist bei neuen Tabellen aber nicht empfohlen.

Eingabe Ergebnis

{|
| style="background:#ABCDEF;" | A
| B
|-
| C
| D
|}

A B
C D

Formatvorlagen

Einige Benutzer haben Vorlagen erstellt, um die Formatierung zu vereinfachen. Anstatt sich an die Tabellenparameter erinnern zu müssen, kann eine Formatvorlage verwendet werden. Diese ist nach dem {| einzufügen. Die Verwendung ermöglicht ein konsistentes Tabellenlayout, eine Erleichterung beim Fehlerhandling, die Einhaltung der Konvention „Farben verwenden“ (Farben) sowie einfache Anpassung des Layouts bei allen Tabellen.

Beispielsweise lässt sich mit der Vorlage {{Testvorlage}}, die den Code Vorlage:Testvorlage enthält, und den vorhandenen Farbvorlagen (siehe „Farben verwenden“) folgende Tabelle erstellen, welche im Quelltext keine kompliziert erscheinenden Formatierungsparameter mehr enthält:

Eingabe Ergebnis

{| {{Testvorlage}}
! Treffpunkt Y- u. X-Achse
! Exempel
! Beispiel
! Muster
|-
| X1
| class="hintergrundfarbe6" | X2
| X3
| X4
|-
| Y1
| class="hintergrundfarbe8" | Y2
| Y4
| class="hintergrundfarbe7" | Y5
|-
| Y6
| Y7
| class="hintergrundfarbe10" | Y8
| class="hintergrundfarbe2" | Y9
|}

Treffpunkt Y- u. X-Achse Exempel Beispiel Muster
X1 X2 X3 X4
Y1 Y2 Y4 Y5
Y6 Y7 Y8 Y9
Diese Seite enthält Ausschnitte des Artikels Hilfe:Tabellen-Referenz aus der freien Enzyklopädie WikipediaWikipedia-logo.png vom 28.04.2009. Der Inhalt unterliegt der GNU-Lizenz für freie Dokumentation und/oder der CC-BY-SA 3.0 UnportedWikipedia-logo.png. In der Wikipedia ist eine Liste der Autoren verfügbar.
In diesem Wiki gilt - soweit dies möglich ist - die CC-BY-SA-Lizenz.