Hilfe:Tabellen

Aus PokéWiki
Zur Navigation springen Zur Suche springen
Die druckbare Version wird nicht mehr unterstützt und kann Darstellungsfehler aufweisen. Bitte aktualisiere deine Browser-Lesezeichen und verwende stattdessen die Standard-Druckfunktion des Browsers.
Hilfeseiten
Allgemein:
Seitengestaltung
Community:
Spezielles:

Diese Seite erklärt das Einfügen von Tabellen in Artikel als Mittel, um gleichartige Informationen übersichtlich zu gestalten. Man sollte Tabellen aber nicht als grafisches Gestaltungsmittel, zum Beispiel für die Anordnung von Bildern, einsetzen, sondern nur dann benutzen, wenn zwischen Tabellenzellen und ihren Zeilen und Spalten semantische Beziehungen bestehen. Sie dienen beispielsweise dann ihrem Zweck, wenn die Informationen in gewisser Weise sortiert werden können, nach Jahreszahlen oder mit alphabetischer Anordnung.

Grundform

Eine einfache Tabelle sieht so aus:

{|
! Überschrift 1 !! Überschrift 2
|-
| Inhalt 1 || Inhalt 2
|-
| Inhalt 3 || Inhalt 4
|}

Daraus wird:

Überschrift 1 Überschrift 2
Inhalt 1 Inhalt 2
Inhalt 3 Inhalt 4

Layout (Grundlagen)

Natürlich kann man die Tabellen dann noch mit Hintergrundfarben und Rahmen versehen...

Unter Verwendung einer Klasse

Etwas hübscher sieht es schon mal mit der Klasse "prettytable" aus:

{| class="prettytable"
! Überschrift 1 !! Überschrift 2
|-
| Inhalt 1 || Inhalt 2
|-
| Inhalt 3 || Inhalt 4
|}

Daraus wird:

Überschrift 1 Überschrift 2
Inhalt 1 Inhalt 2
Inhalt 3 Inhalt 4

Weitere Farben

Die folgenden Werte werden als class-Attribut angehängt.
Also z.B.

{| class="lightBg1"
! Überschrift 1 !! Überschrift 2

oder

{| class="lightBg1 darkBorder1"
! Überschrift 1 !! Überschrift 2

Hintergrund

class="lightBg1"
class="darkBg1"
class="darkBg2"

Rahmen

class="lightBorder1"
class="darkBorder1"

Hintergrund + Rahmen

class="lightBg1 lightBorder1"
class="darkBg1 lightBorder1"
class="darkBg2 lightBorder1"

Hintergrund + dunkler Rahmen

class="lightBg1 darkBorder1"
class="darkBg1 darkBorder1"
class="darkBg2 darkBorder1"


Für mehr Informationen zur farblichen Gestaltung von Tabellen siehe Hilfe:Farben.

Sortieren

Eine Tabelle kann sortiert werden, indem man am Anfang der Tabelle
{| class="sortable"
einfügt. Bei einer sortierbaren Tabelle befinden sich in der ersten Zeile Kasten, die durch Anklicken die Spalte darunter nach dem Alphabet (sowohl aufsteigend als auch absteigend) sortieren.

Buchstaben Zahlen
a 1
b 2

Sortierung verhindern

Einzelne Spalten oder Zeilen können von der Sortierung durch Einfügen von class="unsortable" ausgenommen werden. Für Spalten bedeutet dies, dass in der ersten Zeile kein Sortierzeichen erscheint, von der Sortierung ausgenommene Zeilen bleiben an ihrem Platz:

sortierbar sortierbar nicht sortierbar
a 1 a
b (nicht sortierbar) 2 (nicht sortierbar) b (nicht sortierbar)
c 3 c
d 4 d

Sortierung beeinflussen

Ein Problem der Sortierung kann sein, dass immer nach dem ersten Zeichen sortiert wird.

Bei der Sortierung ausschließlich von Zahlen gibt es soweit keine Probleme:

Zahlen
200
1000
40
3

Problematisch wird es aber, wenn in einem Feld Zahlen gemischt mit Text sortiert werden muss:

Zahlen
100 %
ca. 40 %
3 %

Um genau zu bestimmen, was wie sortiert wird, kann man einen Sortierwert zu den Attributen hinzufügen. Dieses Attribut wird als data-sort-value noch vor dem eigentlichen Inhalt, ähnlich wie ein class-Attribut, auf die folgende Weise eingefügt:

| data-sort-value="Sortierwert" | Inhalt


In unserem Beispiel sieht das dann folgendermaßen aus:

{| class="prettytable sortable"
! Zahlen
|-
| data-sort-value="100" | 100%
|-
| data-sort-value="040" | ca. 40%
|-
| data-sort-value="003" | 3%
|}

Mit dem Sortier-Attribut wird die Tabelle nun korrekt sortiert. Da der Sortierwert theoretisch auch Buchstaben beinhalten darf, sollte in diesem Fall eine führende Null sicherheitshalber mit angegeben werden. Die korrigierte Tabelle sieht dann so aus und lässt sich wie gewünscht sortieren:

Zahlen
100%
ca. 40%
3%

Layout (erweitert)

Tabellenüberschrift

Mit folgender Syntax kann man einer Tabelle eine Überschrift geben:

{|
|+ Überschrift
|-
...
|}

Diese wird standardmäßig zentriert über der Tabelle ausgerichtet:

Liste der Pokémon
Pokémon Typ(en)
Bisasam PflanzeGift

Textausrichtung

Innerhalb einer Tabelle kann mit folgenden Tabellen die Ausrichtung des Textes bestimmen:

{|
| align="right" | a
| align="center" | b
| align="left" | c
|}

a b c

Man kann ebenso die vertikale Ausrichtung bestimmen:

{|
|- style="vertical-align:top;" (für die ganze Zeile)
| a
| A
| 1
|-
| valign="top" | b
| valign="middle" | B (für einzelne Zellen)
| valign="bottom" | 2
|}

a A 1
b B 2

Zellen vereinigen

Mehrere Zellen können auch zu einer einzigen vereinigt werden. Dies geht mit den Befehlen colspan="..." (Angabe der Breite in Zellen) und rowspan="..." (Angabe der Höhe in Zellen). Eine solche Tabelle könnte also z. B. so erzeugt werden:

{|
! rowspan="2" | 2 Zellen hoch
! colspan="2" | 2 Zellen breit
|-
| a
| b
|}

2 Zellen hoch 2 Zellen breit
a b

Ist eine Zelle mehrere Zeilen hoch, wird im Quelltext in der nächsten Zeile diese einfach weggelassen. So steht im Quelltext dieser Tabelle das "a" in der zweiten Tabellenzeile an erster Stelle, obwohl das "a" erst in der zweiten Spalte ausgegeben wird.