Hilfe:Tabelle

Das Erstellen von Tabellen wird über Code gelöst. An dieser Stelle sind Quellcodes für besonders häufige Varianten von Tabellen zu finden, die per Copy&Paste in Artikel eingefügt werden können.

Einfache Tabelle

Eine einfache Beispieltabelle: aus dem Artikel

Spalte1	Spalte2	Spalte3
Zeile1	Spalte2/Zeile1	Spalte3/Zeile1
Zeile2	Spalte2/Zeile2	Spalte3/Zeile2
Zeile3	Spalte2/Zeile3	Spalte3/Zeile3
Zeile4	Spalte2/Zeile4	Spalte3/Zeile4
Zeile5	Spalte2/Zeile5	Spalte3/Zeile5

Die obige Tabelle wird durch den folgenden Quelltext erzeugt:

{| class="wikitable"
|-
! Spalte1    !! Spalte2   !! Spalte3
|-
| Zeile1 || Spalte2/Zeile1 || Spalte3/Zeile1
|-
| Zeile2 || Spalte2/Zeile2 || Spalte3/Zeile2
|-
| Zeile3 || Spalte2/Zeile3 || Spalte3/Zeile3
|-
| Zeile4 || Spalte2/Zeile4 || Spalte3/Zeile4
|-
| Zeile5 || Spalte2/Zeile5 || Spalte3/Zeile5
|}

Erläuterungen

• Die Zeichenfolge (Tag) {| beginnt eine Tabelle, während |} sie abschließt. Beide Tags müssen im Quelltext an einem Zeilenanfang stehen.
• Das Attribut class="wikitable" bewirkt, dass die ganze Tabelle nach den Vorgaben der Klasse wikitable formatiert wird. Diese sieht unter anderem Trennlinien zwischen den Zellen, zusätzlichen Platz zwischen Zelleninhalt und Zellenrand (das sogenannte cellpadding) sowie einen angedunkelten Hintergrund für durch ! markierte Kopfzeilen vor.
• Zeilen, die mit einem Ausrufezeichen (!) beginnen, definieren Kopfzeilen von Tabellen. Der Text in einer Zelle einer solchen Zeile wird zentriert und fett gedruckt. Gewöhnliche Tabellenzeilen beginnen dagegen mit einem senkrechten Trennstrich (|).
• Das Tag |- beginnt eine neue Tabellenzeile, falls es im Quelltext an einem Zeilenanfang steht.
• Die Zeichen || bzw. !! trennen nebeneinander liegende Tabellenzellen.

Zellfärbung

Spalte 1	Spalte2		Spalte3
Zeile1	Spalte2/Zeile1	Spalte2/Zeile1	Spalte 3
Zeile2	Spalte2/Zeile2	Spalte2/Zeile2	Spalte 3
Zeile3	Spalte2/Zeile3	Spalte2/Zeile3	Spalte 3

Die grüne Tabelle wird durch folgenden Code erstellt:

{|class="wikitable"; style="color:white; background-color:#6fc400" cellpadding="10" cellspacing="0" border="5"
|-
! Spalte 1 !! colspan="2" | !!  Spalte3
|-
| Zeile1 || Spalte2/Zeile1 || Spalte2/Zeile1 || Spalte 3
|-
| Zeile2 || Spalte2/Zeile2 || Spalte2/Zeile2 || Spalte 3
|-
| Zeile3 || Spalte2/Zeile3 || Spalte2/Zeile3 || Spalte 3
|}

• Die Text- und Hintergrundfarbefarbe wird durch style="color:white; background-color:#6fc400" erstellt. "Style" bezeichnet die Farbe des Textes, "backround-color" die Farbe des Tabellenhintergrunds. An dieser Stelle können auch andere Farben wie beispielsweise "red", "blue" oder "yellow" angegeben werden.
• Möchte man unter einer Überschrift zwei Spalten unterbringen, so muss man dies mit colspan="2" | Spalte2 angeben.

Farbauswahl

Farben werden über ein Farbschema für das Internet angegeben. Es folgen einige Beispiele:

Zelle	{|class="wikitable"; style="color:white; background-color:#6fc400" cellpadding="10" cellspacing="0" border="1" |- ! Zelle !! |}

Zelle	{|class="wikitable"; style="color:black; background-color:#fde800" cellpadding="10" cellspacing="0" border="1" |- ! Zelle !! |}

Zelle	{|class="wikitable"; style="color:white; background-color:#a2e5fe" cellpadding="10" cellspacing="0" border="1" |- ! Zelle !! |}

Zelle	{|class="wikitable"; style="color:white; background-color:#ffde800" cellpadding="10" cellspacing="0" border="1" |- ! Zelle !! |}

Zelle	{|class="wikitable"; style="color:white; background-color:#f8a8a8" cellpadding="10" cellspacing="0" border="1" |- ! Zelle !! |}

Zelle	{|class="wikitable"; style="color:white; background-color:#ff4b4b" cellpadding="10" cellspacing="0" border="1" |- ! Zelle !! |}

• Weitere Farben sind hier zu finden: Hilfe:Farbpalette

Etwas dezenter ist diese Art der Tabelle:

Hervorheben einzelner Zellen

Zelle1	Zelle2	Zelle3
Zelle4	Zelle 5	Zelle 6

Diese Tabelle wird mit folgendem Code erzeugt:

 {| style="color:white"
 |-
 | style="background:red"|Zelle1 || width="300" style="background:blue"|Zelle2 || style="background:green"|Zelle3
 |-
 | style="background:red" | Zelle4 || width="300" style="background:gray"|Zelle 5 ||style="background:gray"|Zelle 6
 |} 

Spaltenbreite

Spalte 1	Spalte 2		Spalte3
Zeile1	Spalte2/Zeile1	Spalte2/Zeile1	Spalte 3
Zeile2	Spalte2/Zeile2	Spalte2/Zeile2	Spalte 3
Zeile3	Spalte2/Zeile3	Spalte2/Zeile3	Spalte 3

Die Spaltenbreite wird über width="123" angegeben. Das Pipe-Symbol ("|") markiert das Ende der definierenden Eigenschaften für die Zelle, zwei Ausrufezeichen ("!!" markieren die Trennung der Spalten voneinander.

{|class="wikitable"; style="color:white; background-color:#6fc400" cellpadding="10" cellspacing="0" border="5"
|-
! width="100" |Spalte 1 !! colspan="2" width="300" | Spalte 2   !!  width="200" | Spalte3
|-
| Zeile1 || Spalte2/Zeile1 || Spalte2/Zeile1 || Spalte 3
|-
| Zeile2 || Spalte2/Zeile2 || Spalte2/Zeile2 || Spalte 3
|-
| Zeile3 || Spalte2/Zeile3 || Spalte2/Zeile3 || Spalte 3
|}

Textausrichtung

Spalte 1	Spalte 2		Spalte3
Zeile1	Spalte2/Zeile1	Spalte2/Zeile1	Spalte 3
Zeile2	Spalte2/Zeile2	Spalte2/Zeile2	Spalte 3
Zeile3	Spalte2/Zeile3	Spalte2/Zeile3	Spalte 3

Textausrichtung: Den auszurichtenden Text muss man durch folgenden Code umrahmen. In der grünen Tabelle ist das Wort "Spalte2" rechtsbündig angeordnet.

<div align="center">Spalte 2</div> zentriert

<div align="left">Spalte 2</div> linksbündig

<div align="right">Spalte 2</div> rechtsbündig

Die angezeigte Tabelle hat diesen Code:

{|class="wikitable"; style="color:black; background-color:#ffffff" cellpadding="10" cellspacing="0" border="1"
|-
! width="100" |<div align="left">Spalte 1</div> !! colspan="2" width="300" | <div align="right">Spalte 2</div>   !!  width="200" | Spalte3
|-
| Zeile1 || <div align="right">Spalte2/Zeile1</div> || <div align="right">Spalte2/Zeile1</div> || <div align="center">Spalte 3</div>
|-
| Zeile2 || <div align="right">Spalte2/Zeile2</div> || <div align="right">Spalte2/Zeile2</div> || <div align="center">Spalte 3</div>
|-
| Zeile3 || <div align="right">Spalte2/Zeile3</div> || <div align="right">Spalte2/Zeile3</div> || <div align="center">Spalte 3</div>
|}