Tabellen

Aus CivWiki
Wechseln zu: Navigation, Suche

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

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

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

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |Ergebnis

{|
|Zelle 1
|Zelle 2
|}

Zelle 1 Zelle 2

Bitte beachten:

{| |Einzelzelle |}

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

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.

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |Ergebnis

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

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Eine Tabelle mit drei Zeilen sieht im Text so aus:

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

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

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 auf 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 °C     21  21  22  23  24  25  27  29  28  26  24  22
Ø Nachttemperatur °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/Monat         6   4   3   2   2   1   0   0   2   5   6   7
Ø Wassertemperatur °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="n", wobei n die Stärke des Rahmens ist.


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

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:

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |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

Rowspanning und Colspanning

Auch mit der neuen Wiki-Syntax 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-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:

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |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

Leere Zellen in Tabellen mit Rahmen

Leere Zellen werden in einer Tabelle nicht umrahmt. Um in machen 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:

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

und stellt sich so dar:

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

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

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:

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |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

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.

Spaltenbreiten

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

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |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

Absolute Angaben in Pixeln sind eher bei Grafiken sinnvoll.

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.

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |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. Das valign gilt jeweils für die ganze Zeile, das align nur für die jeweilige Zelle.

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |Ergebnis

{| border="1" cellspacing="0"
!
! align="left" | Links
! align="center" | Zentriert
! align="right" | Rechts
|- valign="top"
! height="38" | Oben
| align="left" | xx
| align="center" | xxx
| align="right" | xx
|- valign="middle"
! height="38" | Mitte
| align="left" | x
| align="center" | x
| align="right" | x
|- valign="bottom"
! height="38" | Unten
| align="left" | x
| align="center" | x
| 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 (bgcolor="#ABCDEF", Farbtabelle) oder Rahmen andere Farben zu geben. Diese Vorgehensweise ist bei neuen Tabellen aber nicht empfohlen.

Vorlage:Highlight1 |Eingabe Vorlage:Highlight1 |Ergebnis

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

A B
C D

Sortierbare Tabellen

Gibt man im Tabellenkopf (d.h. in der ersten Zeile nach dem {|) class="wikitable sortable" ein, bekommt man eine sortierbare Tabelle.

Die Tabelle kann nicht vorsortiert werden, sondern wird immer so dargestellt, wie sie im Quelltext eingegeben wird.


Eingabe Ergebnis

{| class="wikitabel sortable" border="1" cellspacing="0"
! Zahlen
! Buchstaben
|-
| abc
| 1
|-
| def
| 1123
|-
| ghi
| 500
|}

Buchstaben Zahlen
abc 1
def 1123
ghi 500

Die Tabelle erkennt beim Sortieren automatisch, ob es sich um Zahlen oder Buchstaben handelt. Wenn man jetzt aber Text oder ein Bild bei den Zahlen einfügt, wird die Sortierung für einen Text vorgenommen. Dadurch kommt 1123 vor 500, weil 1 „im Alphabet“ vor 5 steht.
In der ersten Zeile kann man pro Spalte angeben, nach welchem Datum sortiert werden soll, indem man eingibt: data-sort-type="number". Man kann nach text, number, time, date usw. sortieren.
Dadurch werden beim Sortieren nur der Zahlwert berücksichtigt.

Eingabe Ergebnis

{| class="wikitabel sortable" border="1" cellspacing="0"
! ohne data-sort-type
! data-sort-type="number" | mit data-sort-type=number
|-
| 1 [[Datei:5gold.png]]
| 1 [[Datei:5gold.png]]
|-
| 1123 [[Datei:5gold.png]]
| 1123 [[Datei:5gold.png]]
|-
| 500 [[Datei:5gold.png]]
| 500 [[Datei:5gold.png]]
|}

ohne data-sort-type mit data-sort-type=number
1 5gold.png 1 5gold.png
1123 5gold.png 1123 5gold.png
500 5gold.png 500 5gold.png

mit Bild

Befindet sich in einer Spalte nur ein Bild, wird es immer an den Anfang sortiert, weil [ „im Alphabet“ vor allen Buchstaben steht. Die tatsächliche Sortierung findet dann ab dem Dateinamen statt. Im unteren Beispiel würden die Barbaren und Persien richtig sortiert, weil die Bildnamen korrekt sind. Da das Symbol-Bild für Spanien aber 5spanien.png heißt, kommt es an erster Stelle.
Möchte man eine korrekte Sortierung, gibt man den Wert der Zelle in Form von data-sort-value="Spanien" an. Dann wird der Zelleninhalt für die Sortierung als „Spanien“ gelesen und entsprechend sortiert. Dies muß man dann für alle Zellen machen, die nicht nur aus Text bestehen (darum werden die Zulu unten werden korrekt einsortiert, weil die Zelle nur aus Text besteht).
So kann man Tabellenspalten, die nur Bilder enthalten korrekt sortieren.

Eingabe Ergebnis

{| class="wikitabel sortable" border="1" cellspacing="0"
! ohne data-sort-value
! mit data-sort-value
|-
| [[Datei:Barbaren symbol civ5.png|25px]]
| data-sort-value="Barbaren" | [[Datei:Barbaren symbol civ5.png|25px]]
|-
| Zulu
| Zulu
|-
| [[Datei:Persien symbol civ5.png|25px]]
| data-sort-value="Persien" | [[Datei:Persien symbol civ5.png|25px]]
|-
| [[Datei:5spanien.png|25px]] Spanien
| data-sort-value="Spanien" | [[Datei:5spanien.png|25px]] Spanien
|}

ohne data-sort-value mit data-sort-value
Barbaren symbol civ5.png Barbaren symbol civ5.png
Zulu Zulu
Persien symbol civ5.png Persien symbol civ5.png
Spanien symbol civ5.png Spanien Spanien symbol civ5.png Spanien

einzelne Spalte ohne Sortierung

Sollte man eine einzelne Spalte nicht sortierbar machen wollen, fügt man class="unsortable" in die Spalte ein.

Eingabe Ergebnis

{| class="wikitabel sortable" border="1" cellspacing="0"
! ohne data-sort-value
! mit data-sort-value
|-
| keine richtige Zivilisation
| data-sort-value="Barbaren" | [[Datei:Barbaren symbol civ5.png|25px]]
|-
| tolle Zivilisation
| data-sort-value="Zulu" | [[Datei:Zulu symbol civ5.png|25px]]
|-
| die mag ich gerne
| data-sort-value="Persien" | [[Datei:Persien symbol civ5.png|25px]]
|-
| Toll, gibt viel Gold!!!
| data-sort-value="Spanien" | [[Datei:5spanien.png|25px]]
|}

nicht sortierbar sortierbar
keine richtige Zivilisation Vandalen
tolle Zivilisation Zululand
die mag ich gerne Persien
Toll, gibt viel Gold!!! Spanien


Siehe auch: Wikipedia FavIcon.png Wikipedia-Hilfe: Tabellen für Fortgeschrittene

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 sowie einfache 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 {{Prettytable}} 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 Vorlage:Prettytable den folgenden Code enthält:

Vorlage:Prettytable

Ein weiteres Beispiel:

{| {{Prettytable}}
!Foo
!Bar
!Baz
!Quux
|-
|100
| {{highlight1}} | Cake
|Monster in the closet
|NO!
|-
|Wikipedia
| {{highlight2}} | ^______^
|Darth Vader
| {{highlight3}} | 42
|-
|Moo
|1.618033989
| {{highlight3}} | Pay your bills
| {{highlight4}} | Bach
|}

erstellt folgende Tabelle:

Foo Bar Baz Quux
100 Vorlage:Highlight1 | Cake Monster in the closet NO!
Wikipedia Vorlage:Highlight2 | ^______^ Darth Vader Vorlage:Highlight3 | 42
Moo 1.618033989 Vorlage:Highlight3 | Pay your bills Vorlage:Highlight4 | Bach