Hilfe:Tabellen
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 |
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
Rahmen
Hintergrund + Rahmen
Hintergrund + dunkler Rahmen
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
.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 |
---|
fast 100% |
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:
Pokémon | Typ(en) |
---|---|
Bisasam | Vorlage:ICVorlage:IC |
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.