Aktivieren

Hilfe:Tabellen

Aus PokéWiki
Wechseln zu: Navigation, Suche

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

Eine weitere Möglichkeit bietet "prettytable-eng", hierbei sind die Innenabstände sehr gering (geeignet für viele kurze Daten):

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

Daraus wird:

Überschrift 1 Überschrift 2
Inhalt 1 Inhalt 2

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 ist, dass immer nach dem ersten Zeichen sortiert wird. Bei der Sortierung von Zahlen wird dieser Fehler automatisch behoben:

Zahlen
200
1000
40
3

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

Zahlen
fast 100%
40%
3%

Um genau zu bestimmen, was wie sortiert wird, kann man unsichtbaren Text in ein Feld hinzufügen. Dieser wird nämlich bei der Sortierung nicht ignoriert, sondern genauso behandelt wie sichtbarer Text. Unsichtbaren Text fügt man folgendermaßen ein:

Das ist <span style="display:none;">unsichtbar</span>. → Das ist unsichtbar.

Wenn man also ganz sicher gehen will, dass die obige Tabelle richtig sortiert wird, kann man sie folgendermaßen ergänzen:

{| class="prettytable sortable"
! Zahlen
|-
| <span style="display:none;">100%</span>fast 100%
|-
| <span style="display:none;">040%</span>40%
|-
| <span style="display:none;">003%</span>3%
|}

Vor jeder Zahl wurde dieselbe Zahl in Prozent unsichtbar hinzugefügt, jedoch so, dass sie richtig sortiert wird (mit führender Null). Die korrigierte Tabelle sieht dann so aus und lässt sich wie gewünscht sortieren:

Zahlen
100%fast 100%
040%40%
003%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 PflanzeIC.pngPflanzeGiftIC.pngGift

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.