Meine Werkzeuge

Hilfe:Tabelle

Aus KommunalWiki
Wechseln zu: Navigation, Suche

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.

Inhaltsverzeichnis

[Bearbeiten] 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
|}

[Bearbeiten] 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.

[Bearbeiten] 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.

[Bearbeiten] 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 !! |}

Etwas dezenter ist diese Art der Tabelle:

[Bearbeiten] 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
 |} 

[Bearbeiten] 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
|}

[Bearbeiten] 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>
|}
Umsetzung: spreebytes.net