Hilfe:Tabellen

Aus SchnuppTrupp
Version vom 6. August 2013, 20:43 Uhr von Kelua (Diskussion | Beiträge)

(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)
Wechseln zu: Navigation, Suche

Tabellen im Wiki

Grundlegende Formatierung

{|
Anfang einer Tabelle 
!
Zellen Überschrift optional. 
|+
Zeilen Überschrift, optional; darf nur zwischen Anfang einer Tabelle und erster Tabellen Zeile gesetzt werden 
|-
Tabellen Zeile, optional für die erste Zeile -- Das Wiki würde es automatsich setzen für die erste Tabellen Zeile 
|
Tabellen Zelle benötigt! Mehrere Tabellen Zellen können in einer Zeile definiert werden, müßen dann jedoch mit doppelter Pipe (||) abgegrenzt werden. Oder in der nächsten Zeile die nächste Zelle mit einem einfachen (|) beginnen. 
|}
Tabellen Ende

Eine einfache Tabelle

Code 

 {|
 |-
 |Zeile 1 Zelle 1
 |Zeile 1 Zelle 2
 |Zeile 1 Zelle 3
 |-
 |Zeile 2 Zelle 4
 |Zeile 2 Zelle 5
 |Zeile 2 Zelle 6
 |}

Ergebnis

Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3
Zeile 2 Zelle 4 Zeile 2 Zelle 5 Zeile 2 Zelle 6

Eine einfache Tabelle mit Überschrift

Code 

 {|
 |+
 !Überschrift 1
 !Überschrift 2
 !Überschrift 3
 |-
 |Zeile 1 Zelle 1
 |Zeile 1 Zelle 2
 |Zeile 1 Zelle 3
 |-
 |Zeile 2 Zelle 4
 |Zeile 2 Zelle 5
 |Zeile 2 Zelle 6
 |}

Ergebnis

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3
Zeile 2 Zelle 4 Zeile 2 Zelle 5 Zeile 2 Zelle 6

Eine einfache Tabelle mit Rahmen

Code 

 {|border="1"
 |+
 !Überschrift 1
 !Überschrift 2
 !Überschrift 3
 |-
 |Zeile 1 Zelle 1
 |Zeile 1 Zelle 2
 |Zeile 1 Zelle 3
 |-
 |Zeile 2 Zelle 4
 |Zeile 2 Zelle 5
 |Zeile 2 Zelle 6
 |}

Ergebnis

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3
Zeile 2 Zelle 4 Zeile 2 Zelle 5 Zeile 2 Zelle 6

Unterschiedliche Rahmenformen und Farben

Code 

 {|style="border-style: ridge; border-width: 12px;"
 |-
 |style="border-style: dotted; border-width: 2px; border-color: red;"|Zeile 1 Zelle 1
 |style="border-style: dashed; border-width: 2px; border-color: green;"|Zeile 1 Zelle 2 
 |style="border-style: solid; border-width: 2px; border-color: blue;"|Zeile 1 Zelle 3
 |-
 |style="border-style: double; border-width: 5px; border-color:#FF9999;"|Zeile 2 Zelle 4
 |style="border-style: groove; border-width: 5px; border-color:#9999FF;"|Zeile 2 Zelle 5
 |style="border-style: outset; border-width: 5px; border-color:#66CC66;"|Zeile 2 Zelle 6
 |}

Ergebnis

Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3
Zeile 2 Zelle 4 Zeile 2 Zelle 5 Zeile 2 Zelle 6

Unterschiedliche Zellenfarben und Schriftfarben

Code 

 {|border="1"
 |+
 !Überschrift 1
 !Überschrift 2
 !Überschrift 3
 |-
 |style="color:red; background-color:#ababab;"|Zeile 1 Zelle 1
 |style="color:green; background-color:#cdcdcd;"|Zeile 1 Zelle 2
 |style="color:blue; background-color:#efefef;"|Zeile 1 Zelle 3
 |}

Ergebnis

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3

Zellen und Zeilen verbinden

Code 

 {| border="1"
 !colspan="6"|Einkaufsliste
 |-
 |rowspan="2"|Brot und Butter
 |Kuchen
 |Vorspeise
 |Nachspeise
 |colspan="2"|Croissant
 |-
 |Käsekuchen
 |colspan="2"|Eiskrem 
 |Butter
 |Yoghurt
 |}

Ergebnis

Einkaufsliste
Brot und Butter Kuchen Vorspeise Nachspeise Croissant
Käsekuchen Eiskrem Butter Yoghurt

Ausrichtung des Textes in der Zelle

Code 

 {| border="1"
 !Linksbündig
 !Zentriert
 !Rechtsbündig
 |-
 |align="left" | Äpfel
 |align="center" | Birnen
 |align="right" | 12,333.00
 |-
 |align="left" |Brot
 |align="center" |Kuchen
 |align="right" | 500.00
 |-
 |align="left" |Butter
 |align="center" |Eiskreme
 |align="right" | 1.00
 |}

Ergebnis

Linksbündig Zentriert Rechtsbündig
Äpfel Birnen 12,333.00
Brot Kuchen 500.00
Butter Eiskreme 1.00

Abstand zwischen den Zellen

Code 

 {|border="1" cellspacing="20"
 |+
 !Überschrift 1
 !Überschrift 2
 !Überschrift 3
 |-
 |Zeile 1 Zelle 1
 |Zeile 1 Zelle 2
 |Zeile 1 Zelle 3
 |-
 |Zeile 2 Zelle 4
 |Zeile 2 Zelle 5
 |Zeile 2 Zelle 6
 |}

Ergebnis

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3
Zeile 2 Zelle 4 Zeile 2 Zelle 5 Zeile 2 Zelle 6

Abstand des Zelleninhaltes zum Zellenrand

Code 

 {|border="1" cellpadding="20"
 |+
 !Überschrift 1
 !Überschrift 2
 !Überschrift 3
 |-
 |Zeile 1 Zelle 1
 |Zeile 1 Zelle 2
 |Zeile 1 Zelle 3
 |-
 |Zeile 2 Zelle 4
 |Zeile 2 Zelle 5
 |Zeile 2 Zelle 6
 |}

Ergebnis

Überschrift 1 Überschrift 2 Überschrift 3
Zeile 1 Zelle 1 Zeile 1 Zelle 2 Zeile 1 Zelle 3
Zeile 2 Zelle 4 Zeile 2 Zelle 5 Zeile 2 Zelle 6


Gestalltung von Text innerhalb einer Zelle

Code 

 
  {| border="1"
  !Schriftgröße 
  !Schriftdicke
  |-
  |style="font-size:10%"|sehr klein
  |style="font-weight:lighter"|dünner
  |-
  |style="font-size:50%"|klein
  |normal
  |-
  |style="font-size:100%"|normal
  |style="font-weight:normal"|normal
  |-
  |normal
  |style="font-weight:bold"|Fett
  |-
  |style="font-size:200%"|groß
  |style="font-weight:bolder"|Fetter 
  |}

Ergebnis

Schriftgröße Schriftdicke
sehr klein dünner
klein normal
normal normal
normal Fett
groß Fetter

Setzt man die Angaben am Anfang der Tabelle gilt es für die gesammte Tabelle. Spätere Angaben addieren sich.

Code 

 
{| border="1" style="font-size:150%; font-weight:bold"
!Schriftgröße 
!Schriftdicke
|-
|style="font-size:10%"|sehr klein
|style="font-weight:lighter"|dünner
|-
|style="font-size:50%"|klein
|normal
|-
|style="font-size:100%"|normal
|style="font-weight:normal"|normal
|-
|normal
|style="font-weight:bold"|Fett
|-
|style="font-size:200%"|groß
|style="font-weight:bolder"|Fetter 
|}

Ergebnis

Schriftgröße Schriftdicke
sehr klein dünner
klein normal
normal normal
normal Fett
groß Fetter

Code 

{| border="1"
! Zeichenabstand
! Wordabstand
! Einrücken ersten Zeile
|-
| style="letter-spacing:0.1em"|Dies ist ein Beispiel Text mit Zeichenabstand 0.1em
| style="word-spacing:0.3em"|Dies ist ein Beispiel Text mit Wordabstand 0.3em
| style="text-indent:1em;"| Bei diesem Text ist die Erste Zeile im Absatz eingerückt. Dies sieht bei längeren Texten manchmal übersichtlicher aus. 
|-
| style="letter-spacing:0.5em"|Dies ist ein Beispiel Text mit Zeichenabstand 0.5em
| style="word-spacing:0.8em"|Dies ist ein Beispiel Text mit Wordabstand 0.8em
| style="text-indent:4em;"| Bei diesem Text ist die Erste Zeile im Absatz eingerückt. Dies sieht bei längeren Texten manchmal übersichtlicher aus. 
|-
| style="letter-spacing:0.8em"|Dies ist ein Beispiel Text mit Zeichenabstand 0.8em
| style="word-spacing:2.5em"|Dies ist ein Beispiel Text mit Wordabstand 2.5em
| style="text-indent:-2em"|Bei negativer Zahl rückt der Text in der ersten Zeile aus. Das sieht hier nicht so gut aus. Zusammen mit einem Rand für den Text kann dies aber nützlich sein.
|}

Ergebnis

Zeichenabstand Wordabstand Einrücken ersten Zeile
Dies ist ein Beispiel Text mit Zeichenabstand 0.1em Dies ist ein Beispiel Text mit Wordabstand 0.3em Bei diesem Text ist die Erste Zeile im Absatz eingerückt. Dies sieht bei längeren Texten manchmal übersichtlicher aus.
Dies ist ein Beispiel Text mit Zeichenabstand 0.5em Dies ist ein Beispiel Text mit Wordabstand 0.8em Bei diesem Text ist die Erste Zeile im Absatz eingerückt. Dies sieht bei längeren Texten manchmal übersichtlicher aus.
Dies ist ein Beispiel Text mit Zeichenabstand 0.8em Dies ist ein Beispiel Text mit Wordabstand 2.5em Bei negativer Zahl rückt der Text in der ersten Zeile aus. Das sieht hier nicht so gut aus. Zusammen mit einem Rand für den Text kann dies aber nützlich sein.


Sortierbare Tabelle

Code 

{| class="wikitable sortable" border="1"
|+ Sortierbare Tabelle
|-
! scope="col" | Alphabetisch
! scope="col" | Numerisch
! scope="col" class="unsortable" | nicht sortierbar
|-
| d || 20 || Diese
|-
| b || 8 || Spalte
|-
| a || 6 || kann nicht
|-
| c || 4 || sortiert
|-
| e || 0 || werden.
|}

Ergebnis

Sortierbare Tabelle
Alphabetisch Numerisch nicht sortierbar
d 20 Diese
b 8 Spalte
a 6 kann nicht
c 4 sortiert
e 0 werden.


Von „http://www.schnupptrupp.org/w/index.php?title=Hilfe:Tabellen&oldid=62842“