Hilfe:Tabellen

aus FreewarWiki, der Referenz für Freewar
Wechseln zu: Navigation, Suche

Hilfeseiten Information icon.svg

Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten. Jedoch sollte man Tabellen nicht als grafisches Gestaltungsmittel einsetzen, sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.

Andererseits sind Tabellen komplizierter als normaler Text. Deshalb sollten sie nur dort eingesetzt werden, wo sie tatsächlich für bessere Übersicht sorgen. Überlege immer, ob du die Informationen nicht auch in einer einfachen Liste unterbringen kannst (siehe Textgestaltung).

Grundlagen[Bearbeiten]

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. (Ausnahme: Tabellen im Schreibmaschinenstil)

Einfache Tabellen[Bearbeiten]

Tabellen im Schreibmaschinenstil ohne Formatierungen[Bearbeiten]

Die einfachste und schnellste „WikiWiki“-Art, eine Tabelle zu erstellen ist der Schreibmaschinenstil. 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 auf PDAs etc. ärgerlich sein kann .

Beispiel & Ergebnis:

Klimatabelle
Monat                   JAN FEB MÄR APR MAI JUN JUL AUG SEP OKT NOV DEZ 
-----------------------------------------------------------------------
Ø Tagestemperatur        21  21  22  23  24  25  27  29  28  26  24  22 
Ø Nachttemperatur        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/Monat         6   4   3   2   2   1   0   0   2   5   6   7 
Ø Wassertemperatur       19  18  18  18  19  20  21  22  23  23  21  20

Tabelle mit einer Tabellenzeile[Bearbeiten]

Jede Zeile 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 eine Style-Argument (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.

Beispiele[Bearbeiten]

Die einfachste Tabelle (sie beinhaltet nur eine Zelle) sieht im Text so aus:

{|
|Minimaltabelle
|}

Und stellt sich so dar:

Minimaltabelle

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

{|
|Zelle 1
|Zelle 2
|}

Und stellt sich so dar:

Zelle 1 Zelle 2

Bitte beachten:

{| |Minimaltabelle |}

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

Tabelle mit mehreren Tabellenzeilen[Bearbeiten]

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

Beispiele[Bearbeiten]

Eine Tabelle mit zwei Tabellenzeilen mit je zwei Zellen sieht im Text so aus:

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

Und stellt sich so dar:

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Eine mit drei Tabellenzeilen sieht im Text so aus:

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

Und stellt sie sich so dar:

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

und so weiter.

Zum Platzsparen ist es möglich, mehrere Tabellenzellen in einer Quelltextzeile unterzubringen; in diesem Fall muss man die Zellen mit || trennen:

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

Komplexere Tabellen[Bearbeiten]

Rahmen[Bearbeiten]

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

Beispiel[Bearbeiten]

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

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

und stellt sich so dar:

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

Titelzeilen[Bearbeiten]

Eine Tabelle mit Titelzeile erreicht man, indem die Zellen, die hervorgehoben werden sollen, mit „!“ statt „|“ eingeleitet werden:

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

und sieht wie folgt aus:

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

Rowspanning und Colspanning[Bearbeiten]

Auch mit den neuen Wiki-Befehlen ist es genauso wie bei HTML möglich eine Zelle über mehrere Zeilen oder Spalten reichen zu lassen, ein so genanntes rowspan bzw. colspan.

Rowspan und colspan werden als Parameter der Zelle gesetzt, und zwar nach dem Prinzip

| Parameter | Inhalt

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

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

Verschachtelte Tabellen[Bearbeiten]

Das Verschachteln ist mit den neuen Wiki-Befehlen 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!

Beispiel[Bearbeiten]

Eine Tabelle, in der eine weitere Tabelle steckt, sieht im Text so aus:

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

und stellt sich so dar:

Zelle 1
Zelle A
Zelle B
Zelle 3

Beschriftung[Bearbeiten]

Mit den neuen Wiki-Befehlen ist es leicht möglich, eine Beschriftung über der Tabelle zu implementieren. 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 Wiki-Befehlen formatieren.

Beispiel[Bearbeiten]

Eine Tabelle, mit Beschriftung, sieht im Text so aus:

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

und stellt sich so dar:

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

Bilder und Tabellen[Bearbeiten]

Bilder in Tabellen zu formatieren ist mit den neuen Wiki-Befehlen einfacher geworden. Möglich wird dies mit class-Argumenten. Class-Argumente können am Anfang einer Tabelle stehen und gelten dann für die ganze Tabelle (ähnlich wie Rahmen (siehe oben)) oder am Anfang einer Zelle. Das Interessante ist, dass nicht nur das Bild formatiert wird, sondern auch der zugehörige Text, dies ist zum Beispiel nützlich für Bildunterschriften. Die zwei (?? gibt's noch mehr ??) class-Argumente sind flag und rimage. Sie werden mittels eines class=flag, bzw. class=rimage eingebunden. Mit class=rimage wird die Größe der Zelle auf das Bild ausgedehnt, ein kleiner Abstand um das Bild zum Rahmen wird beibehalten, und der Text verkleinert und zentriert und das ganze auf die rechte Seite geschoben. Mit class=flag wird der Text zwar ebenfalls zentriert, aber nicht verkleinert und auch nicht auf die rechte Seite verschoben.

Beispiele[Bearbeiten]

Um ein rechts ausgerichtetes Bild mit einer Bildunterschrift anzuzeigen, verwendet man die folgende Struktur:

{| class="rimage"
| [[Bild:zzz.png]]<br />Ein langer Text, der unter dem Bild steht.
|}

Analog funktioniert es mit limage für links ausgerichtete Bilder.

Das Ergebnis im Text ist:

Zzz.png
Ein langer Text, der unter dem Bild steht.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas augue. Quisque dapibus, est sed mattis mollis, orci tortor pretium lorem, id feugiat leo tellus eget nibh. Phasellus vel dui. Aliquam sollicitudin ante et dolor. Fusce dictum eros vitae dolor. Aliquam erat volutpat. Etiam pede orci, aliquam sed, mattis quis, bibendum et, metus. Aenean libero. Aliquam erat volutpat. Vestibulum placerat risus quis lacus. Mauris ultrices venenatis est. Etiam accumsan euismod lorem. Ut sollicitudin mi at massa. Morbi aliquam wisi non justo. Suspendisse consectetuer dui vitae wisi. Nulla sed lectus sed lorem rhoncus fringilla. Aenean leo orci, ultrices et, ornare eu, imperdiet non, nunc. Praesent sed purus at quam convallis vehicula.

Sed pede wisi, eleifend vel, lobortis quis, molestie vitae, nisl. Quisque eget urna quis tellus dictum egestas. Nulla facilisi. Aliquam fermentum dapibus enim. Morbi in tellus vitae lacus ultrices volutpat. Aenean tortor ante, consectetuer eget, laoreet lobortis, lobortis id, metus. Fusce id enim. Aliquam erat volutpat. Quisque venenatis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas vulputate diam in sapien.

Die folgende Funktion funktioniert noch nicht in der deutschen Wikipedia: Eine Tabelle, mit Flagge mit Bildunterschrift,(flag) sieht im Text so aus:

{| class="flag"
| [[Bild:zzz.png]] Ein kurzer Text
|}

und stellt sich so dar:

Zzz.png Ein kurzer Text

sortierbare Tabellen[Bearbeiten]

Um Tabelleinträge sortierbar zu machen, genügt es, den Parameter class="sortable" in den Tabellenkopf mit aufzunehmen:

{| border="1" class="sortable"
!Name
!Alter
|-
|Abel
|44
|-
|Bebel
|21
|}
Name Wert
Abel 44
Bebel 21

Soll eine Zeile oder Spalte nicht sortierbar sein, so kann dies mit class="unsortable" in der Zeilen- oder Spaltendefinition geschehen:

{| border="1" class="sortable"
!Name
!Wert
!class="unsortable"|Bemerkung 
|-
|Abel
|44
|Herr Abel kennt sich mit Tabellen aus.
|-
|Bebel
|21
|Frau Bebel bevorzugt Listen.
|}
Name Wert Bemerkung
Abel 44 Herr Abel kennt sich mit Tabellen aus.
Bebel 21 Frau Bebel bevorzugt Listen.

Sortierung beeinflussen[Bearbeiten]

Da die Sortierung Sonderzeichen nicht berücksichtigt, kann mit der Vorlage:SortKey ein anderer Text für die Sortierung verwendet werden:

{|border="1" class="sortable"
!Sortierung ohne Vorlage SortKey
!Sortierung mit Vorlage SortKey
|-
|Deutschland
|Deutschland
|-
|Österreich
|{{SortKey|Oesterreich|Österreich}}
|-
|Schweiz
|Schweiz
|}
Sortierung ohne Vorlage SortKey Sortierung mit Vorlage SortKey
Deutschland Deutschland
Österreich Österreich
Schweiz Schweiz

Formatierungen[Bearbeiten]

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.

Spaltenbreiten[Bearbeiten]

Spaltenbreiten können relativ und absolut angegeben werden. Die Angabe ist nur bei einer Zelle der Spalte notwendig und sinnvoll.

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

Absolute Angaben in Pixel sind eher bei Grafiken sinnvoll.

Rahmen, cellspacing, cellpadding[Bearbeiten]

{|
|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="5" cellpadding="0"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta
{| border="1" cellspacing="0" cellpadding="5"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta
{| border="1" cellspacing="0" cellpadding="5" style="border-collapse:collapse;"
|Alpha || Beta || Gamma
|-
|Delta || Epsilon || Zeta
|}
Alpha Beta Gamma
Delta Epsilon Zeta

Ausrichtung[Bearbeiten]

Genau wie in HTML kann man den Inhalt von Zellen in der Tabelle unterschiedlich ausrichten:

{| border="1" cellspacing="0"
!
!align="left"|Links
!align="center"|Zentriert
!align="right"|Rechts
|-
!valign="top" height="38"|Oben
|valign="top" align="left"| x
|valign="top" align="center"| x
|valign="top" align="right"| x
|-
!valign="middle" height="38"|Mitte
|valign="middle" align="left"| x
|valign="middle" align="center"| x
|valign="middle" align="right"| x
|-
!valign="bottom" height="38"|Unten
|valign="bottom" align="left"| x
|valign="bottom" align="center"| x
|valign="bottom" align="right"| x
|}
Links Zentriert Rechts
Oben x x x
Mitte x x x
Unten x x x

Andere HTML-Formatierungen[Bearbeiten]

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

{|
|bgcolor="#ABCDEF"|A
|B
|-
|C
|D
|}
A B
C D

Formatvorlagen[Bearbeiten]

Einige Benutzer haben Vorlagen erstellt, um die Formatierung zu vereinfachen. Anstelle 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 Vereinfachung beim Fehlerhandling sowie bei der Anpassung des Layouts bei allen Tabellen. Beispielsweise diese Tabelle:

Multiplikation
× A B C
1 I II III
2 IV V VI
3 VII VIII IX
4 x XI XII
5 XIII XIV XV

wird durch einfaches Ersetzen von border="1" cellpadding="2" durch class="wikitable" zu:

Multiplikation
× A B C
1 I II III
2 IV V VI
3 VII VIII IX
4 x XI XII
5 XIII XIV XV

Dies ist der Fall, da die Vorlage Prettytable den folgenden Code enthält:

class="wikitable"

Ein weiteres Beispiel:

{| class="wikitable"
!Foo
!Bar
!Baz
!Quux
|-
|100
|{{subst:highlight1}}|Cake
|Monster in the closet
|NO!
|-
|Wikipedia
|{{subst:highlight2}}|^______^
|Darth Vader
|{{subst:highlight3}}|42
|-
|Moo
|1.618033989
|{{subst:highlight3}}|Pay your bills
|{{subst:highlight2}}|Bach
|}

erstellt folgende Tabelle:

Foo Bar Baz Quux
100 Cake Monster in the closet NO!
Wikipedia ^______^ Darth Vader 42
Moo 1.618033989 Pay your bills Bach
Quelle

Dieser Artikel basiert auf dem Artikel aus der freien Enzyklopädie Wikipedia und steht unter der GNU-Lizenz für freie Dokumentation. In der Wikipedia ist eine Liste der Autoren verfügbar.