Hilfe:Tabellen: Unterschied zwischen den Versionen

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 in einer extra Zeile stehen. Mit |- schließt man die aktuelle Tabellenzeile ab und wechselt in die nächste Zeile.

{|
|
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 die gesamte Zeile einer Tabelle. 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
|}

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

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.

color gibt die Textfarbe an, background die Hintergrundfarbe. Mit border kann die Umrandungsfarbe festgelegt werden, die "normale" Umrandung wird dabei ersetzt. Man gibt hier auch die Stärke der Umrandung an. Hierbei muss beachtet werden, dass diese Formatierung die Eigenschaft border im Header nicht ersetzt. Wenn im Header border nicht gesetzt wird, haben die einzelnen Zellen keine Umrandung! Die border-Eigenschaft in style kann auch für die Umrandungen einzelner Zellen genutzt werden.

Es gibt zwei Möglichkeiten, Farben anzugeben: Entweder man verwendet voreingestellte Farben ("green", "yellow", "lightblue" etc.) oder man mischt sich die Farbe selbst. Die Farbmischung macht man mit 3 Hexadezimalwerten, die hintereinander hinter ein # geschrieben werden. Die Farbe kann entweder mit einstelligen oder mit zweistelligen Werten gemischt werden. Der erste Wert gibt den Rotanteil an, der zweite den Grünanteil und der dritte den Blauanteil. #FFFFFF (zweistellige Werte) wäre etwa weiß, #000 (einstellige Werte) schwarz, #880000 dunkles Rot usw. (wer diese Methode nicht kennt: Einfach ausprobieren!)

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