Tabellen sind ein gutes Mittel, um gleichartige Informationen übersichtlich zu gestalten.
Auch die gute Beeinflussung der graphischen Gestaltung mit Hilfe von Tabellen sorgt für deren reichliche Verwendung, auch wenn dies nicht ihrer Idee entspricht: Tabellen sollten verwendet werden, 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, z. B. nach Jahreszahlen oder mit alphabetischer Anordnung.
Andererseits sind Tabellen komplizierter zu überarbeiten als normaler Text. Deshalb sollten sie nur in Fällen eingesetzt werden, wo mit ihrer Hilfe tatsächlich eine bessere Übersicht erzielt wird oder in denen die Sortierung klar ist.
Die hier vorgestellten Beispiele können auch von Benutzern ohne besondere Kenntnisse in HTML, CSS und Javascript angewendet werden.
Grundgerüst
Wiki-Code für ein einfaches Grundgerüst, deren Formatierung bereits durch die Klasse wikitable voreingestellt ist. Diese Klasse funktioniert auch in anderen Wikis:
| Kopfzeile Überschrift Spalte 1 | Kopfzeile Überschrift Spalte 2 |
|---|---|
| Zeile 1, Zelle 1 | Zeile 1, Zelle 2 |
| Zeile 2, Zelle 1 | Zeile 2, Zelle 2 |
{| class="wikitable" border="1"
|-
! Kopfzeile Überschrift Spalte 1
! Kopfzeile Überschrift Spalte 2
|-
| Zeile 1, Zelle 1
| Zeile 1, Zelle 2
|-
| Zeile 2, Zelle 1
| Zeile 2, Zelle 2
|-
|}
Maddraxikon-Standard-Tabelle
Die maddraxikon standard table ist eine Klasse, die extra für das Maddraxikon geschrieben wurde. Das bedeutet, dass sie einerseits nur im Maddraxikon angewendet werden kann und andererseits für ein einheitliches Erscheinungsbild sorgt und keine umfangreiche Einzelformatierung benötigt. Andere Wikis können mit diesem Quelltext nichts anfangen. Es gibt sie in zwei Ausführungen: einfach (maddraxikon_std_table) und sortierbar nach Spalten (maddraxikon_std_table sortable).
Bei beiden Ausführungen erfolgt die Sortierung innerhalb der Spalten stets nach Anfangsbuchstaben bzw. Zahlen. Die Tabellenbreite ist auf 100% festgelegt, unabhängig von der Spaltenbreite.
Spaltenbreite variabel
Im folgenden Beispiel ist die Spaltenbreite nicht festgelegt und passt sich automatisch an:
| Name | Volk | Auftritt | Quellen |
|---|---|---|---|
| Agat'ol (†) | Hydrit | Mar'os-Jünger | MX 184 |
| Angelis, Leto Jolar (†) | Marsianer | Mitglied der Erd-Mission | MX 150 |
| Aruula | Barbarin | Begleiterin von Matthew Drax, Königin der Dreizehn Inseln | MX 001 |
{| class="maddraxikon_std_table sortable"
!Name
!Volk
!Auftritt
!Quellen
|----
|[[Agat'ol]] (†)
|[[Hydrit]]
|[[Mar'os (Legende)|Mar'os]]-Jünger
|[[Quelle:MX184|MX 184]]
|----
|[[Leto Jolar Angelis|Angelis, Leto Jolar]] (†)
|[[Marsianer]]
|Mitglied der [[Erd-Mission]]
|[[Quelle:MX150|MX 150]]
|----
|[[Aruula]]
|[[Barbar]]in
|Begleiterin von [[Matthew Drax]], Königin der [[Dreizehn Inseln]]
|[[Quelle:MX1|MX 001]]
|----
|}
Spaltenbreite festgelegt
Möchte man die Spaltenbreite festlegen, sieht der Quelltext folgendermaßen aus:
| Name | Volk | Auftritt | Quellen |
|---|---|---|---|
| Agat'ol (†) | Hydrit | Mar'os-Jünger | MX 184 |
| Angelis, Leto Jolar (†) | Marsianer | Mitglied der Erd-Mission | MX 150 |
| Aruula | Barbarin | Begleiterin von Matthew Drax, Königin der Dreizehn Inseln | MX 001 |
{| class="maddraxikon_std_table sortable"
!width="20%" | Name
!width="20%" | Volk
!width="40%" | Auftritt
!width="20%" | Quellen
|----
|[[Agat'ol]] (†)
|[[Hydrit]]
|[[Mar'os (Legende)|Mar'os]]-Jünger
|[[Quelle:MX184|MX 184]]
|----
|[[Leto Jolar Angelis|Angelis, Leto Jolar]] (†)
|[[Marsianer]]
|Mitglied der [[Erd-Mission]]
|[[Quelle:MX150|MX 150]]
|----
|[[Aruula]]
|[[Barbar]]in
|Begleiterin von [[Matthew Drax]], Königin der [[Dreizehn Inseln]]
|[[Quelle:MX1|MX 001]]
|----
|}
Zeilen zusammenfassen
Beispiel 1
| Zugehörigkeit | Beschreibungen | Quellen |
|---|---|---|
| Text, den man einfügen könnte |
Unterbegriff oben | Quelle:MX1 |
| Unterbegriff unten | Quelle:HC001 | |
| anderer Begriff | seine Beschreibung | seine Quelle |
{| class="madraxikon_std_table"
!width="30%" | Zugehörigkeit
!width="50%" | Beschreibungen
!width="20%" | Quellen
|---
| rowspan="2" |Text, <br>den man einfügen könnte
|Unterbegriff oben
|Quelle:MX1
|---
|Unterbegriff unten
|Quelle:HC001
|---
|anderer Begriff
|seine Beschreibung
|seine Quelle
|---
|}
Beispiel 2
| Zugehörigkeit | Beschreibungen | Quellen |
|---|---|---|
| A | Beschreibung von A | Quelle:MX1 |
| B | Beschreibung von B | Text, den man einfügen könnte |
| C | Beschreibung von C | |
| D | Beschreibung von D |
{| class="maddraxikon_std_table"
!width="30%" | Zugehörigkeit
!width="50%" | Beschreibungen
!width="20%" | Quellen
|---
|A
|Beschreibung von A
|Quelle:MX1
|---
|B
|Beschreibung von B
| rowspan="3" |Text, <br>den man einfügen könnte
|---
|C
|Beschreibung von C
|---
|D
|Beschreibung von D
|---
|}
Spalten und Zeilen zusammenfassen
Ein komplexeres Beispiel zeigt der Quelltext des Artikels Zyklen und Großzyklen.
Text in Spalten unterteilen
Wenn man viele kurze Zeilen hat, kann man sie in Spalten nebeneinander darstellen. Zwischen die Spalten mit Text sollte man Spalten der Breite 0% und ohne Text einfügen. Dadurch werden die anderen Spalten auf Abstand gehalten.
Spaltenanzahl und Spaltenbreite können leicht angepasst werden. Soll es sich um Spalten mit gleicher Breite handeln, so ist ein entsprechender Teil von 100% anzusetzen – bei drei Spalten also 33%. VORSICHT: Wenn eine Zeile zuviel Text enthält, wird er nicht richtig dargestellt.
|
|
|
|
{| valign="top" border="0" cellpadding="5" cellspacing="2"
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* A
* B
* C
| width="0%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* D
* E
* F
| width="0%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* G
* H
* I
| width="0%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
| width="25%" style="background:#FFFFFF; border: 0px solid #000000;" valign="top" |
* J
* K
* L
|}
| Parameter | Bedeutung | Notwendig | Vorgabe |
|---|---|---|---|
| width | Gesamtbreite (Tabellenkopf) | nein | "100%" |
| border | Rahmen (Tabellenkopf) | nein | "0" |
| padding | Innenabstand (Spalten) | nein | "10" |
| valign | Vertikale Ausrichtung (Spalten) | nein | "top" |
| align | Horizontale Ausrichtung (Spalten) | nein | "left" |
| col1 | Inhalt der 1. Spalte | ja | – keine – |
| col2 | Inhalt der 2. Spalte | ja | – keine – |
| col3 bis col10 | Inhalt der 3. bis 10. Spalte | nein | – leer (fehlt dann) – |
Bitte die "|" zwischen "width", "valign", "align", "padding" und "border" beachten. Die Werte für diese Parameter sind mit HTML identisch.
Nicht notwendige Parameter können ganz weggelassen werden.
Weblinks
- Anleitung des Sternenfaust-Wiki
- Anleitung der Perrypedia
- Anleitung der Wikipedia (deutschsprachig)
- Details zum Thema Tabellenlayout und CSS würden den Umfang dieser Seite sprengen. Näheres siehe unter der Tabellensektion der SelfHTML-Dokumentation.
- Eine englischsprachige Anleitung zum Erstellen von Tabellen findet sich unter meta.wikipedia.org.