Hilfe:Tabellen

Hoch zum Lehrbuch
Sei mutig! - Seite bearbeiten - Inhaltsverzeichnis - Farben - Rahmen - Infoboxen - Tabellen - Fußnoten - LaTeX - Vorschau
Erste Schritte auf der Spielwiese - Formatierung auf der Spielwiese üben

Die einfachste Tabelle

Sie können für kleine Tabellen einen ganz einfachen Trick wählen: Beginnen Sie jede Tabellenzeile mit einem Leerzeichen. Dann erhalten Sie eine gerahmte Tabelle und die Schriftart Courier, die jedem Buchstaben genau dieselbe Spaltenbreite zuordnet.

Spalte 1       Spalte 2        Spalte 3
---------------------------------------
     111            222             333
     aaa            bbb             ccc
     ...            ...             ...
     xxx            yyy             zzz

Man erspart sich die schwierigen Steuerzeichen. Es sollten allerdings nicht zu viele oder zu breite Spalten sein, sonst ragen sie auf Bildschirmen mit geringer Auflösung über den Rand.

Tabelle mit mehreren Tabellenzeilen

• Jede Tabelle beginnt mit einer öffnenden geschweiften Klammer und dahinter einem senkrechten Strich. Formatierungsanweisungen dürfen folgen.
• Jede Tabellenzeile beginnt mit einem senkrechten Strich.
• Der Beginn einer neuen Zeile wird deutlich gemacht, indem man hinter den senkrechten Strich ein Minuszeichen setzt.

Dies lässt sich beliebig oft wiederholen.

• Eine Tabelle endet mit einem senkrechten Strich, gefolgt von einer schließenden geschweiften Klammer.

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

Tipp zur Quelltext-Gestaltung

Ein Nachteil am Quelltext ist, dass er mitunter recht unübersichtlich ist.

{|{{prettytable}}
| kurz || länger || sehr lang || sehr sehr sehr lang
|-
| länger || sehr lang || sehr sehr sehr lang || kurz
|-
| sehr lang || wirklich enorm <br /> extrem übermäßig lang || kurz || länger
|-
| sehr sehr sehr lang || kurz || länger || sehr lang
|}

Man kann die Abstände im Quelltext (Leerzeichen) beliebig groß machen, damit man so leichter die Übersicht behält. Zur Not teilt man eine sehr lange Zeile, die über den Bildschirmrand hinaus gehen würde, einfach in zwei Zeilen auf. Das späteres Nachbearbeiten der Tabelle wird dadurch leichter.

{|{{prettytable}}
| kurz                || länger    || sehr lang           || sehr sehr sehr lang
|-
| länger              || sehr lang || sehr sehr sehr lang || kurz
|-
| sehr lang           || wirklich enorm <br /> extrem übermäßig lang
|                                     kurz                || länger
|-
| sehr sehr sehr lang || kurz      || länger              || sehr lang
|}

Die Ausgabe sieht in beiden Fällen gleich aus

kurz	länger	sehr lang	sehr sehr sehr lang
länger	sehr lang	sehr sehr sehr lang	kurz
sehr lang	wirklich enorm extrem übermäßig lang	kurz	länger
sehr sehr sehr lang	kurz	länger	sehr lang

Tabelle mit Rahmen

Mit Hilfe von CSS-Klassen lassen sich Tabellen bequem und einheitlich formatieren. Die Klasse "wikitable" ist für den Rahmen und die graue Hintergrundfarbe zuständig. Das ! Ausrufungszeichen markiert eine hervorgehobene Spaltenüberschrift und die blaue Hintergrundfarbe hat auch eine eigene CSS-Klasse.

Eingabe	Ergebnis
{| class="wikitable" ! Spalte 1 | Spalte 2 |- | Zelle 1 | Zelle A |- class="hintergrundfarbe6" | Zelle 2 | Zelle B |- | Zelle 3 | Zelle C |}	Spalte 1 Spalte 2 Zelle 1 Zelle A Zelle 2 Zelle B Zelle 3 Zelle C

Sortierbare Tabellen

Mit Hilfe einer speziellen CSS-Klasse lassen sich auch sortierbare Tabellen erstellen (benötigt Java-Script).

Eingabe	Ergebnis
{| class="wikitable sortable" ! Spalte 1 ! Spalte 2 |- | Zelle 1 | Zelle A |- | Zelle 3 | Zelle B |- | Zelle 2 | Zelle C |}	Spalte 1 Spalte 2 Zelle 1 Zelle A Zelle 3 Zelle B Zelle 2 Zelle C

Voraussetzung für die Funktion ist, dass die Überschriftszeile mit „!“ (Ausrufezeichen) gebildet wird.
Die Sortierung kann mit der Vorlage:SortKey beeinflusst werden.

Tabellenformatierung im Tabellenkopf

In diesem Abschnitt soll es darum gehen, wie Formatierungen im Tabellenkopf das Aussehen der gesamten Tabelle verändern können. Wir benutzen die folgende einfache Beispieltabelle:

Was wir schreiben {|{{prettytable}} |+ Einfaches Beispiel ! Spalte 1 || Spalte 2 || Spalte 3 |- | Z1S1 || Z1S2 || Z1S3 |- | Z2S1 || Z2S2 || Z2S3 |}

und was wir dadurch erhalten Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3

Bei den nachfolgenden Beispielen wird nur der Kopf (die erste Zeile) einer Tabellen-Definition verändert. Genauer: Das {{prettytable}} der obigen Beispieltabelle wird durch etwas anderes ersetzt, durch verschiedene HTML-Attribute. Der restliche Körper bleibt immer der selbe.

Einfacher Rahmen {|border="1" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Rahmen mit Schatten {|border="2" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3
Nur Außenumrandung {|border="1" rules="none" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Gitternetz und Rahmen {|border="1" rules="all" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3
Gitternetz und dicker Rahmen {|border="3" rules="all" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Gitternetz {|rules="all" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3
Reihen gruppieren {|border="1" rules="rows" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Spalten gruppieren {|border="1" rules="cols" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3
Zelleninnenabstand erweitern {|border="1" cellpadding="10" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Zellenaußenabstand erweitern {|border="1" cellspacing="20" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3

Das Style-Attribut

Hintergrund-Farbe {| style="background:yellow;" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Rahmen-Farbe {|style="border: 2px solid green;" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3
Zentrieren von Text {|style="text-align:center" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3	Text rechtsbündig {|style="text-align:right" Einfaches Beispiel Spalte 1 Spalte 2 Spalte 3 Z1S1 Z1S2 Z1S3 Z2S1 Z2S2 Z2S3

Für Details zum Gebrauch und wo Tabellen nützlich sein können:

• http://meta.wikimedia.org/wiki/Help:Table englisch
• http://de.wikipedia.org/wiki/Hilfe:Tabellen deutsch

Verschachteln von Tabellen

Die Zellen einer Tabelle müssen nicht ausschließlich mit Text gefüllt sein. Auch Bilder und andere Tabellen können eine Tabelle füllen. Solche verschachtelten Tabellen sind vielseitig verwendbar.

1. Tabellen belegen mitunter nur einen Teil der Seitenbreite, so dass die Breite des Fensters bzw. des Papiers schlecht ausgenutzt wird.
2. Mitunter soll eine Tabelle oder ein Bild zur Illustration eines Textes dienen. Tabelle oder Bild neben dem Text zu platzieren dient der Übersicht.
3. Es ist mitunter schwierig, Komponenten wie Tabellen, Bilder oder Textabschnitte auf eine gewünschte Weise auf der Seite anzuordnen. Je nach Breite des Browserfensters verrutschen die Komponenten auf eine kaum vorhersagbare Weise. Will man die Seite ausdrucken, kommen die Seitenumbrüche als unberechenbarer Faktor hinzu. Insbesonders Bilder werden oft vom dazugehörigen Text getrennt. Die Einbettung in eine Tabelle kann das Problem lösen.

Beispiel

A	{|{{prettytable}}	Umfassende Tabelle
B	|	erste Tabellenzelle (entspricht <td>...</td>)
11	{|	Beginn der ersten Tabelle
12	|Z1S1||Z1S2
13	|-
14	|Z2S1||Z2S2
15	|-
16	|Z3S1||Z3S2
17	|}	Ende der ersten Tabelle
C	|	zweite Tabellenzelle (entspricht <td>...</td>)
21	{| border="2"	Beginn der zweiten Tabelle
22	|Z1S1||Z1S2
23	|-
24	|Z2S1||Z2S2
25	|}	Ende der zweiten Tabelle
D	|	dritte Tabellenzelle (entspricht <td>...</td>)
31	|width="150px" |[[bild:Torchlight help.png|40px]]	Kästchen für das Bild 150px breit
E	|	vierte Tabellenzelle (entspricht <td>...</td>)
41	{| {{prettytable}}	Beginn der Tabelle im vierten Feld
42	|Z1S1||align="right" width="80px" |Z1S2	Z1S2 breiter und rechtsbündig
43	|-
44	|Z2S1||Z2S2
45	|}	Ende des vierten Feldes
F	|	fünfte Tabellenzelle (entspricht <td>...</td>)
51	=== Text ===
52	Natürlich kann auch Text ... was passiert!
G	|}	Hier endet die umfassende Tabelle

So sieht es aus:

Z1S1 Z1S2 Z2S1 Z2S2 Z3S1 Z3S2

Z1S1 Z1S2 Z2S1 Z2S2

Z1S1 Z1S2 Z2S1 Z2S2

Text Natürlich kann auch Text in einem der Kästchen stehen, auch mit einer Überschrift. Verändern Sie mal die Breite des Fensters und sehen Sie, was passiert!

Bemerkungen

• Die mit den Buchstaben A bis G bezeichneten Zeilen gehören zur übergeordneten Tabelle, gewissermaßen zur "Infrastruktur".
• {{prettytable}} in der Zeile A betrifft den äußeren Rahmen und die Linien zwischen den fünf Feldern. Den Inhalt der Kästchen betrifft das nicht. Darum wurde in den Zeilen 21, 31 und 41 das Darstellung innerhalb der Felder festgelegt.
• In Zeile 32 wurde die Breite der Zelle festgelegt, damit neben dem Bild mehr Platz ist. Mit align="left" oder align="center" oder align="right" könnte die Position des Bildes festgelegt werden.
• In Zeile 42 sorgt das width="80px" dafür, dass die zweite Spalte breiter wird. align="right" verschiebt Z1S2 in dem breiten Kästchen nach rechts.
• Beim grünen Text in Zeile 31 bzw. beim blauen Text in Zeile 42 handelt es sich um jeweils eine Zeile.

Tabellen in Vorlagen

Man kann Tabellen auch in Vorlagen einsetzen. Doch wenn man den einfachen Wikisyntax für Tabellen in Vorlagen nutzen will, stellt man schnell fest, dass das nicht funktioniert. Der Grund dafür ist, dass die Software die senkrechten Striche (Pipes, |) als Trennzeichen für übergebene Parameter interpretiert. Um Tabellen in Vorlagen nicht in HTML-Tabellen-Syntax eingeben zu müssen, muss man diese Zeichen maskieren. Dazu gibt es einen Workaround: Man ersetzt den Wikisyntax für die Tabelle mit folgenden Vorlagen. Die Software sorgt dann dafür, dass die richtigen Zeichen in dem eigentlichen Artikel übergeben werden.

 Wikisyntax              Vorlage

     {|                  {{(!}}
      |                  {{!}}
      |-                 {{!-}}
      |}                 {{!)}}

Weblinks

Für Details zum Gebrauch und wo Tabellen nützlich sein können:

• Wikipedia:Tabellen
• How to use table
• Help:Table#Nested tables