Formatvorlagen      Chronik      Charaktere      Tagebücher      Gespielte Abenteuer     

Hilfe:Tabellen erstellen

Aus Avesfeuer
Wechseln zu: Navigation, Suche

Grundlagen

Tabellen sind einfach zu erstellen, damit sie jedoch nach etwas aussehen muss man einige Befehle kennen. Es ist ein wenig mühsam, aber es lohnt sich.

Jede Tabelle beginnt mit {| und endet mit |}. Dazwischen wird jede neue Zelle einer Zeile mit dem pipe-Symbol | begonnen, eine neue Zeile beginnt mit |-.

Ganz einfaches Beispiel:

{|
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}

ergibt

Zelle 1 Zelle 2
Zelle 3 Zelle 4

Um Platz zu sparen kann man neue Spalten nach der ersten auch mit || beginnen:

{|
|Zelle 1 ||Zelle 2
|-
|Zelle 3 ||Zelle 4
|}

ergibt

Zelle 1 Zelle 2
Zelle 3 Zelle 4


Komplexere Tabellen

Viele Formatierungsbefehle für Tabellen werden in der ersten Zeile des Tabellencodes eingegeben, es wird deswegen im Folgenden nicht extra darauf hingewiesen.

Rahmen

Der Befehl border="x" erzeugt einen einfachen Rahmen um die Tabelle, mit der Stärke von x.

{| border="1"
|Zelle 1
|Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Titelzeile

Wenn man Zellen hervorheben will ist dies einfach möglich, indem man statt dem pipe-Symbol das Ausrufezeichen ! benutzt um die Zelle zu beginnen. Der hervorgehobene Text wird dabei automatisch fett und zentriert.

{| border="1"
!Zelle 1 - hier steht mehr drin
!Zelle 2
|-
|Zelle 3
|Zelle 4 - hier steht mehr drin
|}
Zelle 1 - hier steht mehr drin Zelle 2
Zelle 3 Zelle 4 - hier steht mehr drin

Platzsparend:

{| border="1"
!Zelle 1 - hier steht mehr drin !!Zelle 2
|-
|Zelle 3 ||Zelle 4 - hier steht mehr drin
|}
Zelle 1 - hier steht mehr drin Zelle 2
Zelle 3 Zelle 4 - hier steht mehr drin

Zellen verbinden

Es ist möglich, mehrere Zellen zu einer einzigen zu verbinden. Dies geschieht mit dem Befehl colspan="x" für horizontales Zellenverbinden bzw. rowspan="x" für vertikales Zellenverbinden. Das x steht für die Anzahl der Zellen, die verbunden werden sollen.

Die Befehle werden direkt vor der Zelle eingebaut, nach folgendem Muster:

| Zellenattribute | Zelleninhalt

Beispiele:

{| border="1"
!Zelle 1
!Zelle 2
|-
|colspan="2"|Zelle 3
|-
|Zelle 5
|Zelle 6
|}
Zelle 1 Zelle 2
Zelle 3
Zelle 5 Zelle 6
{| border="1"
!Zelle 1
!Zelle 2
|-
|rowspan="2"|Zelle 3
|Zelle 4
|-
|Zelle 5
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 5

Es ist möglich beide Befehle zu kombinieren:

{| border="1"
!Zelle 1
!Zelle 2
!Zelle 3
|-
|rowspan="2" colspan="2"|Zelle 4
|Zelle 5
|-
|Zelle 6
|-
|Zelle 7
|Zelle 8
|Zelle 9
|}
Zelle 1 Zelle 2 Zelle 3
Zelle 4 Zelle 5
Zelle 6
Zelle 7 Zelle 8 Zelle 9

Verschachtelte Tabellen

Es ist möglich mehrere Tabellen ineinander zu verschachteln.

{| border="1"
!Zelle 1
!Zelle 2
!Zelle 3
|-
| Zelle 4
|
{| border="2"
| Zelle A
|-
| Zelle B
|}
| Zelle 6
|}
Zelle 1 Zelle 2 Zelle 3
Zelle 4
Zelle A
Zelle B
Zelle 6

Tabellenbreite und Spaltenbreiten

Normalerweise wird die Tabelle nur so breit dargestellt wie es nötig ist um den Inhalt vollständig zu umfassen. Mit dem Befehl width="x" kann man das ändern. x kann dabei sowohl eine Prozentzahl (der jeweiligen Bildschirmbreite) oder eine feste Zahl (pixel) sein.

{| border="1" width="100%"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4
{| border="1" width="1000"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Um nur die Breite einer Spalte zu ändern benutzt man den gleichen Befehl, nur als Zellenattribut einer beliebigen Zelle der entsprechenden Spalte geschrieben. Dabei ist es sinnvoll, der Tabellenbreite ebenfalls einen Wert zuzuweisen. Weist man der Tabelle etwa eine Breite von 50% zu und der ersten Spalte eine Breite von 75%, besitzt die Spalte effektiv eine Breite von 3/8 der Bildschirmbreite.

{| border="1" width="50%"
!width=75% |Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Ausrichtung des Tabelleninhaltes

Mittels der Befehle valign="x" und align="x" kann man den Inhalt der Zellen nach Belieben ausrichten. align steht dabei für die horizontale Ausrichtung, demensprechend kann x left, center oder right sein.
valign steht dagegen für die vertikale Ausrichtung, demensprechend kann x top, center oder bottom sein.
Wird einer der beiden Befehle direkt nach dem Beginn einer neuen Zeile |- gegeben, gilt er für die ganze Zeile. Wird der Befehl hingegen als Zellattribut gegeben gilt er auch nur für eine Zelle.

{| border="1"
|leere Zelle
! Überschrift 1
! Überschrift 2
! Überschrift 3
|- valign="top"
! height="38" | Oben
| align="left" | Zelle 1
| align="center" | Zelle 2
| align="right" | Zelle 3
|- valign="middle"
! height="38" | Mitte
| align="center" | Zelle 4
| align="right" | Zelle 5
| align="left" | Zelle 6
|- valign="bottom"
! height="38" | Unten
| align="right" | Zelle 7
| align="left" | Zelle 8
| align="center" | Zelle 9
|}
leere Zelle Überschrift 1 Überschrift 2 Überschrift 3
Oben Zelle 1 Zelle 2 Zelle 3
Mitte Zelle 4 Zelle 5 Zelle 6
Unten Zelle 7 Zelle 8 Zelle 9

Ausrichtung der Tabelle

Ebenfalls ist es möglich die gesamte Tabelle anzuordnen, mittels des Befehls align="x". Mögliche Parameter sind dabei left, center und right.

{| border="1" align="right"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
{| border="1" align="center"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Hintergrundfarben

Es ist möglich einzelnen Zellen oder auch die ganze Tabelle mit einer Hintergrundfarbe auszustatten. Der entsprechende Befehl ist style="background:x;", wobei x eine Kombination aus Zahlen und Buchstaben ist, die eine bestimmte Farbe kodiert. Eine Liste findet sich unter Webfarben.

{| border="1" style="background:#FFF7A5;"
!Zelle 1
!Zelle 2
|-
| style="background:#87CEEB" | Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Zellenabstände und Abstand zum Rahmen

Man kann den Abstand zwischen den Zellen und auch den Abstand der Zellen zum Rahmen der Zelle verändern. Die entsprechenden Befehle sind cellspacing="x" für Abstände zwischen den Zellen und cellpadding="x" für den Abstand zum Rahmen der Zellen. x ist dabei eine Zahl.

{| border="1" cellspacing="10" cellpadding="0"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4


{| border="1" cellspacing="0" cellpadding="10"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4
{| border="1" cellspacing="10" cellpadding="10"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4

Mittels des Befehls style="border-collapse:collapse;" ist es außerdem möglich, den Rahmen der Tabelle und die Rahmen der Zellen zu verschmelzen.

{| border="1" cellpadding="10" style="border-collapse:collapse;"
!Zelle 1
!Zelle 2
|-
|Zelle 3
|Zelle 4
|}
Zelle 1 Zelle 2
Zelle 3 Zelle 4


Häufig im Wiki benutzte Tabellenarten

Sehr beliebt sind im Wiki Aventurica inzwischen Navigationsleisten, mit deren Hilfe man schnell auf thematisch ähnliche Seiten zugreifen kann.

Dies ist eine typische Navigationsleiste für wenige Begriffe, wie sie z.B. bei Sphäre, Zwölfgötter und Erzdämonen zum Einsatz kommt.

Was ich nicht weiß:

  • Was bedeutet id="toc"? Ist das eine vorgegebene CSS-Klasse?
{| align="right" id="toc" style="background:#ffffff;"
| align="center"  style="background:#777777;" | '''Überschrift'''
|-
| align="center" | 
<small>
1. Begriff - 
2. Begriff - 
3. Begriff - 
4. Begriff<br/>
5. Begriff - 
6. Begriff - 
7. Begriff - 
8. Begriff
<br>
</small>
|}
Überschrift

1. Begriff - 2. Begriff - 3. Begriff - 4. Begriff
5. Begriff - 6. Begriff - 7. Begriff - 8. Begriff

Links