Hilfe:Tabellen
Dieser Artikel zeigt euch, wie ihr mit Hilfe der wiki-Syntax Tabellen erstellen könnt. Alternativ könnt ihr auch den Tabellengenerator ausprobieren, der vieles automatisch macht.
Inhaltsverzeichnis
Grundlagen
Dieser Abschnitt behandelt die Grundlagen der Tabellensyntax.
| Beschreibung | Editorschreibweise | Darstellung | ||||
|---|---|---|---|---|---|---|
|
Eine Tabelle hat zunächst einmal im Code einen Anfang und ein Ende, die mit {| und |} gekennzeichnet werden. In den Zeilen dazwischen erstellt man die Tabelle: Jede Zelle wird mit einem | in einer eigenen Zeile begonnen. In den nächsten Zeilen kann man den Text der Zelle schreiben, mit einem | fängt man die nächste Zelle an (siehe Beispiel). Wichtig ist, dass die | jeweils zu Beginn einer Zeile stehen. Alternativ kann man, um den Quellcode übersichtlicher zu halten, neue Zellen auch mitten in der Zeile beginnen, indem man sie mit || einleitet. |
{|
| Text von Zelle 1
| Text von Zelle 2
|-
| Text von Zelle 3,33
| Text von Zelle 4
|}
alternativ:
{|
| Text von Zelle 1 || Text von Zelle 2
|-
| Text von Zelle 3,33 || Text von Zelle 4
|}
|
| ||||
|
Wie man im vorherigen Beispiel sieht, hat die Tabelle noch keinerlei Ränder. Das soll aber im Moment noch nicht stören. Jede Spalte einer Tabelle wird standardmäßig so breit dargestellt wie der Text in ihrer längsten Zelle. Ein automatischer Zeilenumbruch findet nur statt, wenn die Tabelle sonst größer als die maximal verfügbare Breite werden würde. Da diese je nach Auflösung des Bildschirms variieren kann, gilt: Bei mehrspaltigen Tabellen möglichst auf automatische Zeilenumbrüche verzichten! Mehrzeilige Zellen verändern die Höhe der ganzen Tabellenzeile. Dabei wird der Text der Zellen vertikal mittig ausgerichtet. Wenn in einer Zeile weniger Zellen sind als in einer anderen, wird automatisch eine leere Zelle hinzugefügt. |
{|
|
langer langer Text
|
mehrzeiliger
Text
|-
|
kurzer Text
|}
|
| ||||
|
Den einzelnen Spalten kann man relativ einfach Überschriften geben. Diese stehen direkt eine Zeile unter dem Header {| und haben ein ! vorangestellt. Vor den ersten normalen Zellen muss jetzt mit |- in die nächste Zeile gegangen werden. Überschriften werden standardmäßig fett geschrieben. |
{|
! Überschrift
! Noch ne Überschrift
|-
|Zelle 1
|Zelle 2
|}
|
| ||||
|
Eine Tabelle kann auch einen Titel haben. Titel setzt man mit |+. |
{|
|+ Tabelle mit Überschriften und Zellen
! Überschrift
! Noch ne Überschrift
|-
| Zelle 1
| Zelle 2
|}
|
|
Rahmen und Formatierung
Hier wird erklärt, wie man einer Tabelle einen Rahmen gibt, wie man die Tabelle in einem Artikel ausrichtet und wie man den Text in den Zellen formatiert.
| Beschreibung | Editorschreibweise | Darstellung | ||||
|---|---|---|---|---|---|---|
|
Natürlich sieht die Tabelle jetzt noch nicht wie eine Tabelle aus - in der Form, wie wir sie vorher hatten, kann man sie allenfalls für mehrzeilige Aufzählungen benutzen. Aber jetzt wollen wir mal einen Rahmen um das Ganze ziehen. Dazu eine kurze Erklärung: Sämtliche Formatierungen, die die gesamte Tabelle betreffen, kommen in den Header der Tabelle (also nach dem {| ); Formatierungen, die nur einzelne Zellen betreffen, kommen hinter das |, das die Zelle einleitet. Die Eigenschaft, die der Tabelle einen Rahmen zuweist, heißt border. Diese setzen wir jetzt mal auf "1". |
{| border="1"
|
Zelle 1
|
Zelle 2
|}
|
| ||||
|
Der Wert von border gibt an, wie dick der äußere Rahmen der Tabelle ist (siehe Beispiel). Sobald border auf etwas anderes als 0 gesetzt wird, bekommt außerdem jede Zelle einen eigenen Rahmen. Um die innere Formatierung zu ändern, setzt man zwei weitere Eigenschaften: cellpadding gibt an, wieviel Platz zwischen dem Text und dem Rahmen der Zelle mindestens sein muss. cellspacing gibt an, wieviel Abstand zwischen einzelnen Zellen sein soll. Die Eigenschaften border, cellpadding und cellspacing werden übrigens immer in Pixeln angegeben. Im Header macht man zwischen den verschiedenen Eigenschaften jeweils ein Leerzeichen. |
{| border="5" cellpadding="4" cellspacing="10"
|
Zelle 1
|
Zelle 2
|}
|
| ||||
|
Die Position der Tabelle lässt sich (sofern sie nicht die gesamte verfügbare Breite in Anspruch nimmt) durch die Eigenschaft align bestimmt, dieser kann auf "left", "center" und "right" gesetzt werden. Eine Tabelle wird vom Text des Artikels umflossen, solange sie nicht in der Mitte plaziert wird. Eine weitere wichtige Eigenschaft ist width. Damit kann angegeben werden, wie breit die Tabelle sein soll. Diese Angabe kann entweder in Pixeln gemacht werden (zB "100px") oder in Prozent (zB "50%"). Bei Angaben in Prozent sind 100% die maximal verfügbare Breite. Dies muss nicht unbedingt die gesamte Seitenbreite sein, sondern kann zum Beispiel, wenn die Tabelle in der Zelle einer anderen Tabelle erstellt wird, die Breite dieser Zelle sein. Der Wert von width wird nicht zwingend angewandt. Wenn beispielsweise width="50% ist, aber schon 60% der maximalen Breite von einem Bild neben der Tabelle belegt werden, ist die Tabelle nur 40% groß. Allgemein lässt sich sagen: width ist eine Obergrenze, aber wenn nötig, wird sie unterschritten. |
{| border="1" align="center" width="75%"
! Überschrift 1
! Überschrift 2
|-
|
Zelle 1
|
Zelle 2
|}
|
| ||||
|
Ähnlich wie die Tabelle können auch die einzelnen Zellen formatiert werden. Die Formatierungseigenschaften werden dabei hinter dem einleitenden | zugewiesen. Die Zuweisungen müssen durch ein weiteres | abgeschlossen werden. align bewirkt hier die Textausrichtung innerhalb der Zelle in der Horizontalen. Für vertikale Formatierung ist valign zuständig (mögliche Werte: "top", "center", "bottom"). Auch width kann auf Zellen angewandt werden. Allerdings macht es nur Sinn, die jeweils oberste Zelle einer Spalte mit width zu formatieren, da sich diese Eigenschaft auf die gesamte Spalte auswirkt. Prozentangaben beziehen sich hier auf die maximale Tabellenbreite, die durch das width im Header festgelegt wird. Wenn die Breite der einzelnen Spalten in Pixeln angegeben wird, macht es keinen Sinn, im Header ein width zu schreiben, weil dann die Tabelle eben so breit ist wie die einzelnen Spalten zusammen (zuzüglich Zwischenräume). Man sollte beachten, dass die width-Werte der einzelnen Spalten zusammengenommen nicht 100% übersteigen, da dies ja nicht möglich ist. Im Ernstfall lässt sich schwer vorhersehen, wie die wiki-Software reagiert. Bei Pixelangaben sollte beachtet werden, dass die Tabelle nicht so groß wird, dass ein Leser mit niedriger Bildschirmauflösung die Tabelle nicht vollständig angezeigt kriegt. Eine Width-Zuweisung für einzelne Spalten macht übrigens auch insofern Sinn, dass dann ein Fließtext in einer Spalte automatisch umgebrochen wird und nicht die Spalte immer länger macht. |
{| border="1" width="100%"
| align="center" width="25%" |
Dieser Text ist in der Mitte.
| align="right" width="50%" |
Dieser Text ist rechtsbündig. Außerdem
wird er automatisch umgebrochen. Er
legt auch die Höhe der Zeile fest.
| valign="bottom" width="25%" |
Dieser Text ist ganz unten.
|}
|
| ||||
|
Auch Überschriften lassen sich formatieren. Es empfielt sich, schon in der Überschrift die Breite einer Spalte festzulegen. Die Eigenschaften werden nach dem ! zugewiesen. Danach setzt man ein | und schreibt dahinter den Text der Überschrift. Bei einer Zeile mit wenig Inhalt kann man ebenfalls Formatierung und Text in eine Editorzeile schreiben. Dazu schreibt man den Text einfach hinter das | nach der Formatierung, oder, wenn keine Formatierung nötig ist, direkt nach das einleitende |. Ob dies gemacht wird oder nicht, ist Geschmackssache; jedenfalls sollte der Quellcode übersichtlich gehalten werden, um auch anderen Schreiben ein einfaches Bearbeiten der Tabelle zu ermöglichen. |
{| border="1"
! width="50px" align="left" | vorne
! width="70px" align="right" | hinten
|-
| valign="top" || wenig Text
| align="center" |
etwas mehr Text, der deshalb nicht hinter
die Formatierung geschrieben werden sollte.
|}
|
|
Style
Dieser Abschnitt behandelt die Ausschmückung von Tabellen mit Farben und sonstigem Krimskrams.
| Beschreibung | Editorschreibweise | Darstellung | ||||
|---|---|---|---|---|---|---|
|
Alles, was zum Style von Tabellen gehört, kommt in eine einzelne Eigenschaft namens style. Der Wert dieser Eigenschaft kann mehrere Eigenschaften zusammenfassen, zur Syntax schaut ihr euch am Besten das Beispiel an. Genaueres dazu ist auf Stupidedia:Farbtabelle. |
{| border="1" style="border: 3px solid #F1900A"
cellpadding="5" cellspacing="0"
! style="color: white; background: #000" | weiß
! style="color: #0FF; background: black" | türkis
|-
| style="border: 2px solid green; color: darkblue" |
dunkelblau, umrandet
| style="color: red; background: red" |
unsichtbar
|}
|
| ||||
|
Die style-Eigenschaft border-collapse bewirkt, dass die einzelnen Zellen sich unmittelbar aneinanderfügen. Hierdurch verliert die Eigenschaft cellspacing natürlich automatisch ihre Funktion. |
{| border="1" style="border-collapse: collapse"
! Überschrift 1
! Überschrift 2
|-
| Zelle 1
| Zelle 2
|}
|
| ||||
| Die Tabellenklasse wikitable setzt ein paar Standard-Styles für die Tabelle. Zellenspezifische style-Eigenschaften überschreieben diese Styles. |
{| class="wikitable"
! Überschrift 1
! Überschrift 2
|-
| Zelle 1
| Zelle 2
|-
|}
|
|
Nachwort
Damit dürfen die massig vielen Tabellenfunktionen wohl klar sein. Für fortgeschrittene Benutzer folgt nun noch ein Index aller Eigenschaften und style-Eigenschaften, die man für Tabellen verwenden kann. Unabhängig davon, ob die Eigenschaften bereits oben im ausführlichen Hilfetext bereits erwähnt wurden, sind Kurzbeschreibungen angegeben.
Index
Dieser Teil ist noch unvollständig! Wer noch was weiß, bitte eintragen!
Normale Eigenschaften
| Name | Werte | Kurzeschreibung |
|---|---|---|
| align | left, center, right; Header und Zellen | Legt die Ausrichtung der Tabelle bzw. des Zellentextes fest. |
| border | Zahlen > 0; nur Header | Legt die Umrandung der Tabelle sowie der einzelnen Zellen fest. |
| cellpadding | Zahlen >= 0; nur Header | Gibt den Mindestabstand zwischen Text und Zellenrand an. |
| cellspacing | Zahlen >= 0; Nur Header | Gibt den Abstand zwischen einzelnen Zellen an. |
| colspan | Zahlen > 0; nur Zellen | Verbindet die angegebene Anzahl von Zellen (von der aktuellen Zelle nach rechts) miteinander. |
| rowspan | Zahlen > 0; nur Zellen | Verbindet die angegebene Anzahl von Zellen (von der aktuellen Zelle nach unten) miteinander. |
| valign | top, center, bottom; nur Zellen | Legt die vertikale Textausrichtung fest. |
| width | Prozent- oder Pixelangaben; Header und Zellen | Gibt die Maximalgröße einer Spalte / der Tabelle an. |
style-Eigenschaften
| Name | Werte, Position | Kurzeschreibung |
|---|---|---|
| background | Farbe; Header und Zellen | Gibt die Hintergrundfarbe für die ganze Tabelle oder einzelne Zellen an. |
| border | Erst Dicke in Pixeln, dann Art (solid, dotted, dashed, groove, double, outset), dann Farbe; Header und Zellen z.B. "border: 1px solid black" |
Färbt die Umrandung der Tabelle bzw. der Zelle ein. |
| border-collapse | collapse; nur Header | Fügt alle Zellen direkt aneinander, ohne Abstand. |
| color | Farbe; Header und Zellen | Gibt die Textfarbe für die ganze Tabelle oder einzelne Zellen an. |
| font-size | Prozentangabe; Header und Zellen | Größe des Textes relativ zur Normalgröße |
| white-space | nowrap; Header und Zellen | Verhindert einen automatischen Zeilenumbruch. Damit kann eine Spalte breiter werden als ihre Maximalbreite. |
